在BOOTSTRAP中使用JS懒加载图片记录。
1、首先引入JS库,原生的从不考虑,这个库一直在更新很好用!地址:GitHub - tuupola/lazyload: Vanilla JavaScript plugin for lazyloading images
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
2、IMG标签:
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />
3、在页面加载完成后,调用 lazyload() 方法来初始化懒加载功能:
<script>
// 等待DOM加载完成后执行初始化操作
document.addEventListener("DOMContentLoaded", function() {
// 初始化懒加载功能,将所有带有 lazyload 类的图片进行懒加载
lazyload();
});
</script>
好了,打完收工。不依赖JQUERY。当然如果引用了JQ库也可以使用JQUERY初始化来添加一些动态效果例如:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>
关于图片LAZY LOAD的原理及实现方法的详细解释参考下面这篇文章,讲得非常非常透: