让图片以lazyload方式加载,即当图片出现在视口中时,才会被加载。
本插件中使用了函数节流以及加载标记,不会阻塞浏览器也不会重复加载。
适用于jQuery或Zepto,亦可以作为AMD模块使用。
-
引入
<script src="./jquery.js"></script> <script src="./lazyload.js"></script>
或:
require(['lazyload'],function() { //$('xxx').lazyload(); })
-
在HTML里设置好
<img>
标签<img class="lazy-img" data-src="./images/01.jpg" width="400px" height="400px">
将
src
地址放在data-src
属性中,建议提前在<img>
属性中设置好width
和height
的值 -
使用Lazyload
$('.lazy-img').lazyload()
即可让所有
class
为lazy-img
的图片以Lazyload形式加载