圖片懶加載的兩種方式

咱們在日常的網站或者移動端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屬性，以實現懶加載，優化性能

 

若是你的項目還存在大量圖片，那麼，，優化一下吧，親~~~