pilpil.js一款具有Media高斯模糊加载图片效果的插件-bootschool.net

pilpil.js是一款轻量级，不依赖其他任何第三方库，具有类似Medium高斯模糊加载图片效果的插件，是渐进式图像加载方案的一个不错选择，简单易用，对于减少页面加载时间有很大帮助。

入门指南

1、引入库文件

<link rel="stylesheet" href="js/pilpil/css/pilpil.min.css">
<script src="js/pilpil/js/pilpil.min.js"></script>

2、HTML代码

pilpil插件不需要任何脚本初始化，引入库文件后，剩下的只需要在HTML中使用特定样式声明一下就可以了，示例如下：

<figure class="graf-figure">
    <div class="aspectRatioPlaceholder">
        <div class="aspectRatioPlaceholder-fill"></div>
        <div class="progressiveMedia" data-width="2000" data-height="1333">
            <img class="progressiveMedia-thumbnail" src="images/small3-30x24.jpg" alt="" />
            <canvas class="progressiveMedia-canvas"></canvas>
            <img class="progressiveMedia-image" data-src="images/big3-1926x1080.jpg" alt="" />
        </div>
    </div>
</figure>

the end

收藏评论

上一篇: 网站功能引导插件Driver.js，实现分步骤介绍产品功能从而增强用户对产品的体验

下一篇: shape-shifter.js一款可将输入内容呈现不同粒子形状插件

pilpil.js一款具有Media高斯模糊加载图片效果的插件

入门指南

1、引入库文件

2、HTML代码

推荐插件查看更多

推荐一款可以让页面元素动起来的滚动动画库-AOS.js

jssor slider功能强大且丰富的轮播插件

jquery.unveil.js大小不到1K非常轻量的延迟加载插件