图片懒加载的两种方式

咱们在日常的网站或者移动端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 //若是你想要加载隐藏图片, 请将  设为  }); }) </script>skip_invisiblefalse

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属性，以实现懒加载，优化性能

 

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