轉載：你還在用jquery.lazyload這個坑爹的圖片分屏加載插件麼？

百度搜索「圖片分屏加載」，映入眼簾的就是jquery.lazyload，相信不少人用過，或許如今還在用，今天我就來講說這個插件的嚴重BUG。

　　何爲圖片分屏加載？顧名思義，就是讓圖片出如今瀏覽器可視區域內時，才進行加載。好處就是當頁面上圖片過多時候，不須要一次性加載完，大大提升了友好性，也減輕的服務器的壓力。

　　關於jquery.lazyload的demo，你們能夠看一下：demo

　　咱們發現，第一屏內的圖片，是正常加載了，當滾動到第二張的時候，過了幾秒，也漸顯出來了，彷佛沒什麼大問題。這時，咱們用火狐的firebug再來觀看下，固然爲了確保測試穩定，我用金山衛士清空了瀏覽器緩存。

　　

　　看到了麼？說好的分屏加載的效果呢？怎麼仍是有2個請求。第一屏就一張圖片，但實際上已經把兩張圖片都加載好了。坑爹的還不只如此，咱們繼續看，當我把滾動條滑動到第二張圖片……

　　納尼？第三個請求出現了！！！我一共兩張圖片，用了jquery.lazyload竟然要下載3張，不只沒有減輕服務器壓力，反而增長了，這不明擺着坑爹嘛。

　　以後，我看了下lazyload的源碼，其實邏輯上都是OK了，把img的src裏的值，存放到自定義的original屬性裏，當圖片滾動到瀏覽器可視區域內時，再把original裏的值賦回到src裏，實現分屏加載。

　　但問題就出在調用上，lazyload的調用方法是寫在$().ready(function(){});裏，如：

$().ready( function (){      $( "#tujie img" ).lazyload({          effect : "fadeIn" ,          failurelimit : 5      }); });

　　也就是在頁面載入完畢後才調用lazyload，而頁面載入完畢後，圖片也都下載好了，再去使用lazyload已經沒有必要，反而就會出現上面說的那種狀況：一共只有2張圖片，卻向服務器請求了3次，下載了3張圖片，拔苗助長。

　　網上有篇修改jquery.lazyload的文章，你們能夠搜搜，不過我試了下，仍是不行，直接不加載了。

　　關於這問題的解決方法，就是換插件，我找到另外一個分屏加載的插件，叫：jquery.scrollLoading，具體說明能夠看下這篇文章《jQuery頁面滾動圖片等元素動態加載實現》，這個插件真正實現了圖片分屏加載。

　　PS：demo頁面若是打不開了，能夠下載這個demo包，不過測試須要放到服務器上去，本地直接打開，firebug裏看不到3次請求的效果。demo點擊下載

 

原文連接：http://www.cnblogs.com/hooray/archive/2011/10/15/2212922.html