图片懒加载的两种方式

我们在平常的网站或者移动端app上常会见到鼠标或手势动作过快，而看到的图片没有加载出来是由色块或是其他图片代替的情况，过1秒或几秒之后，图片被显示出来。这里，使用了一种技术，图片懒加载。

为什么会出现这种技术呢？

因为，在我们前端工作项目中，页面的渲染速度很是重要，其中的一大问题就是图片加载速度会拖累整个页面体验，常会出现加载半张图片或是残缺，网速不好的有时候还会出现图片加载不出来等问题。那么我们可以使用现有的技术，先显示可视区域中的图片，再使剩余图片未显示的图片和滚动条事件做交互，“滑到你，你再显示出来”。

那么我来说明一下两种方式：

1.jquery.lazyload.min.js

2.echo.min.js

---------------------------------------------------------------------------

1.jquery.lazyload.min.js

由于你使用的是jquery的东东，，那么一定要引入jquery.js，但一定要注意引入顺序-->如下

1 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
2 <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

图片格式-->一定要有宽高，和data-original属性

1 <img class="lazy" alt="" width="640" height="480" data-original="img/1.jpg"  />

<script type="text/javascript">
    $(function(){
        $("img.lazy").lazyload({
            event:"click",　　　　//将图片加载放进click事件中
            effect : "fadeIn",　　//淡入效果
            failure_limit : 10,　　//将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索（PS：如果你有一个猥琐的布局, 请把这个参数设高一点）

            skip_invisible : false  //如果你想要加载隐藏图片, 请将 skip_invisible 设为 false
        });
    })
</script>

2.echo.min.js

如果，你不想引用jquery，那么这一款轻量级的延迟加载就很合适。

同样，图片也需要宽高，和data-echo

1 <img class="lazy" alt="" width="640" height="480" data-echo="img/1.jpg"  />

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

1 <script type="text/javascript">
2 
3 Echo.init({
4      offset: 0,　　//离可视区域多少像素的图片可以被加载
5      throttle: 1000 //图片延时多少毫秒加载
6 }); 
7 </script>

-------------------------------------------------------------

二者都是将data-xx的属性设置为图片路径，在滚动条之后，赋值给src属性，以实现懒加载，优化性能

如果你的项目还存在大量图片，那么，，优化一下吧，亲~~~