实现图片延迟加载插件lazyload

字数 189阅读 49

jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置。延迟加载的好处是节省HTTP请求和带宽,同时提高首屏的加载速度,提高用户体验。
1.引入插件

src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

需要先引入jQuery。

2.基本用法

<img class="lazy" src="" data-original="" width="765" height="574">
$("img.lazy").lazyload();

img标签的src指向一个图片占位符,真实图片路径在data-original中,可以从这个网站获取占位符图片placeholder.com

3.更多用法请参考官方文档https://github.com/tuupola/jquery_lazyload

推荐阅读更多精彩内容