ilazy是一个图片懒加载的工具,当图片出现在可视区域时才加载该图片。
使用npm下载:
$ npm install ilazy
下载后直接引用script
<script src="../somePath/ilazy.js"></script>
应该为每个图片设置好大小,以实现占位的功能。
若需要按比例设置,可以使用padding-top
来相对于元素的宽度来设置。
<body>
<!-- 使用img标签 -->
<img src="loading.gif" alt="avatar" data-ilazy="images/avatar.png">
<!-- 或者使用background-image -->
<div class="avatar" data-ilazy-background="images/avatar.png"></div>
<script src="dist/ilazy.js"></script>
<script>
ilazy.init({
offset: 30,
callback: function(elem) {
console.log(elem)
}
})
</script>
</body>
距离可视区域的偏移量。
滚动的容器,默认是window,即全局滚动。
希望传入的是,ID选择器或者Class选择器,例如:#container
或者 .container
加载成功后的回调函数,返回了当前加载的元素。