jquery.lazyload插件实现图片懒加载

首先,需要导入jquery库以及jquery.lazyload插件,个人感觉引用外部的资源网页的加载速度会快一些!

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.1/jquery.lazyload.min.js"></script>

其次,在需要实现懒加载的img标签上添加一个类名"lazy-load",将img标签的属性src换成data-original

<img width="25px" class="lazy-load" data-original="images/0.png"/>

最后是js代码

$("img.lazy-load").lazyload({
                    effect: "show", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
                    threshold: 180, //预加载，在图片距离屏幕180px时提前载入
                    event: 'click',  // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
                    container: $("#moveDive"), // 指定对某容器中的图片实现效果
                    failure_limit: 1 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
                });

用起来还是挺方便的!