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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值