JS图片懒加载LAZY LOAD

在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的原理及实现方法的详细解释参考下面这篇文章，讲得非常非常透：

Lazy Loading Images – The Complete Guide