JS图片懒加载LAZY LOAD

最新推荐文章于 2024-07-25 13:58:20 发布

code-is-poetry

最新推荐文章于 2024-07-25 13:58:20 发布

阅读量524

点赞数 7

CC 4.0 BY-SA版权

分类专栏： JS/CSS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Solmyr_biti/article/details/136110934

JS/CSS 专栏收录该内容

1 篇文章

订阅专栏

在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