图片/图形
响应式图片懒加载的js插件
PetitQ
responsively-lazy 是一款非常实用的可实现响应式图片懒加载的 js 插件。它可以根据容器的大小来智能选择加载适合尺寸的图片，做到图片的响应式效果。并且使用它对于 SEO 是十分友好的。该图片懒加载插件的特点还有：
响应式图片
也想出现在这里？联系我们吧
不做任何不必要的请求
可以在任何支持 srcset 的浏览器中工作
智能处理加载的合适尺寸的图片
在旧的浏览器中不会破坏布局
使用方法
使用该图片懒加载插件需要引入 responsivelyLazy.min.css 和 responsivelyLazy.min.js 文件。
<link rel="stylesheet" href="responsivelyLazy.min.css">
<script async src="responsivelyLazy.min.js"></script>
HTML 结构
为你需要进行懒加载的图片添加下面的 HTML 结构：
<div class="responsively-lazy" style="padding-bottom:68.44%;">
<img alt="" src="images/2500.jpg" data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>
你需要自定义<div>容器的 padding-bottom 样式。如果你不知道图片的比例，你也可以不用<div>容器，直接使用<img>。
<img class="responsively-lazy" alt="" src="images/2500.jpg" data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
