图片懒加载实现

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

首先我们来讲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" alt=""><br>
<img src="lun2.jpg" alt=""><br>
<img data-original="lun1.jpg" class="lazy" alt=""><br>
　　<noscript><img src="lun1.jpg" alt=""></noscript>
<img data-original="lun4.jpg" class="lazy" alt=""><br>
　　<noscript><img src="lun4.jpg" alt=""></noscript>
<img data-original="lun5.jpg" class="lazy" alt=""><br>
　　<noscript><img src="lun5.jpg" alt=""></noscript>
<img data-original="lun4.jpg" class="lazy" alt=""><br>
　　<noscript><img src="lun4.jpg" alt=""></noscript>
<img data-original="lun2.jpg" class="lazy" alt=""><br>
　　<noscript><img src="lun2.jpg" alt=""></noscript>
<img data-original="lun1.jpg" class="lazy" alt="">
　　<noscript><img src="lun1.jpg" alt=""></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>

jq的懒加载大家看懂后，就可以尝试手动写懒加载效果：

其实懒加载的原理非常的简单：初次加载页面时只加载用户能看到的图片，而其他的图片等用户需要看时再加载。

首先将需要懒加载的图片先设置空的路径地址，并且设置display：none;让其隐藏；

　　<img class="lazy" id='lazy1' alt="" src=""/>

　　<img class="lazy" id='lazy2' alt="" src=""/>

　　.lazy{display：none}

这样在初次加载时由于路径为空，图片无法加载出来,并且因为图片被隐藏，所以也不会占用页面空间。

那么接下来就是实现懒加载的js部分了，这里有两种方式，可以根据需求灵活使用：

1、通过$(document).ready()方法，在页面加载完成后给图片添加路径，并取消隐藏：

　　$(document).ready(function(){

　　　　$('#lazy1').attr('src','/Template/xpshop_currents/Images/haohuiduo.jpg');

 　　　　$('#lazy1').show();

　　})

2、通过监听鼠标页面滚动距离来加载图片

　　$(window).scroll(function(){

　　　　$('#lazy2').attr('src','/Template/xpshop_currents/Images/jiazhi.jpg');//鼠标滚动立即加载
　　　　if ($('#lazy2').offset().top - $(document).scrollTop()<1) {//鼠标滚动到合适的位置时将图片显示出来，可以设定自己想要的动画效果
　　　　　　$('#lazy2').fadeIn();
　　　　};
　　　　$('#lazy3').attr('src','/Template/xpshop_currents/Images/weibu.jpg');
　　　　if ($('#lazy3').offset().top - $(document).scrollTop()<1) {
　　　　　　$('#lazy3').fadeIn();
　　　　};
　　})

 懒加载其实很简单，大家有没有看懂呢？