jQuery lazyload 图片懒加载实现

Posted 2020-09-28 野望之风

现在网站页面内容越来越丰富，图片内容也越来越多，而图片过多会导致网页文件过大，从而引发加载缓慢的问题，而图片懒加载就是为解决这一问题而生。

首先我们来讲Jquery的懒加载控件

 jQuery lazyload.JS

 　　jQuery lazyload.JS 地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js  直接复制源码到本地

 　　jQuery lazyload.JS是用 jQuery编写的一个控件，所以要运行 jQuery lazyload.JS必须先载入  jQuery

1、请将下列代码加入</body>前: 

 

　　<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

　　<script type="text/javascript" src="jquery.lazyload.js"></script>

2、首先图片大小必须设置，然后删除图片的src标签,将图片的地址放在data-original属性上，给懒加载图像一个特定的class（例如:lazy）
代码如下：

　　<img class="lazy" alt="" width="800" height="5000" data-original="img/lazy1.jpg" />

　　$(function() {

　　 　　$("img.lazy").lazyload();

　　});

3、效果设置更改

　　 jQuery lazyload.JS在加载时有很多选项可以设置：

　　1、设置临界点

　　　　默认情况下图片是进入屏幕区域后再加载. 如果你想提前加载图片, 可以设置threshold 选项, 比如设置 threshold 为 150 令图片在距离屏幕 150 像素时提前加载.　　　

　　　　$("img.lazy").lazyload({

 　　　　　　threshold : 200

　　　　});

　　2、事件触发加载

　　　　也可以通过各类事件来触发加载，如点击事件：

　　　　$("img.lazy").lazyload({

 　　　　　　event : "click"

　　　　});

　　3、特效加载

　　　　默认是调用show()进行加载，你当然可以使用你想要的效果来实现。比如下面的代码使用fadeIn （淡入效果）：　　　　

　　　　$("img.lazy").lazyload({

 　　　　effect : "fadeIn"

　　　　});

　　4、提前加载图片

　　　　你也可以设定提前加载几张图片来提升网页浏览的连贯性，这由failure_limit的值来决定：　　　　

　　　　$("img.lazy").lazyload({

 　　　　　　failure_limit : 2

　　　　});

　　5、加载隐藏的图片

　　　　Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false：

　　　　$("img.lazy").lazyload({

 　　　　　　skip_invisible : false

　　　　});

4、为了在某些浏览器或用户未启用JS或js控件加载失败的情况下实现优雅降级, 可以添加noscript标签，然后通过 CSS 先隐藏带控件的img元素，同时让控件执行成功时先运行show()方法将img元素显示出来，再运行懒加载.

最后代码如下：

<style type="text/css">
　　img {
　　width: 100%;
　　}
　　.lazy{display: none;}
</style>
<img src="lun1.jpg" ><br>
<img src="lun2.jpg" ><br>
<img data-original="lun1.jpg" class="lazy" ><br>
　　<noscript><img src="lun1.jpg" ></noscript>
<img data-original="lun4.jpg" class="lazy" ><br>
　　<noscript><img src="lun4.jpg" ></noscript>
<img data-original="lun5.jpg" class="lazy" ><br>
　　<noscript><img src="lun5.jpg" ></noscript>
<img data-original="lun4.jpg" class="lazy" ><br>
　　<noscript><img src="lun4.jpg" ></noscript>
<img data-original="lun2.jpg" class="lazy" ><br>
　　<noscript><img src="lun2.jpg" ></noscript>
<img data-original="lun1.jpg" class="lazy" >
　　<noscript><img src="lun1.jpg" ></noscript>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src=‘jqueryLazyload.js‘></script>
<script type="text/javascript">
$(function() {
　　$("img.lazy").show().lazyload({
　　　　effect:‘fadeIn‘
　　});
});

</script>