今天給鬼片電影網在做改版，因為首頁大量使用了圖片，整個圖片列表占據了2-3屏，對於用戶和服務器來說，一次性加載這么多的圖片都是一件很糟糕的事情，影響用戶體驗不說，還加大了服務器的鴨梨，實現圖片延時加載或者滾動才加載圖片，那你肯定會聽說過LazyLoad這個Jquery插件了！
首先，我們來看看他官方的使用：
<script src=”/content/js/jquery.min.js”></script> <script src=”/content/js/jquery.lazyload.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $("img").lazyload({ placeholder : "loading.gif", effect : "fadeIn" }); }); </script>
我們得引用Jquery和Lazyload.js這兩個腳本，LazyLoad的工作原理是先在<img>下創建original屬性，並把src屬性值賦值給original，然后再把src的值修改成你設置的 placeholder的值。當滾動條到達圖片位置時，再把original的屬性賦值給src。這個時候向服務器發出一個HTTP請求，確認下有沒有修改，服務器返回一個304狀態，等於本來一遍HTTP請求能完成的工作，它用了2遍，非但沒有減少開支，還增加開銷；
還有一個方法非常方便的檢測是否真的延時加載，打開圖片列表的頁面，先不要滾動，等待一陣子，然后打開Firebug開發者工具或者其他的網絡監控工具，此時滾動頁面，留意是否有圖片加載的請求，你會發現是沒有的，因為圖片已經在你等候的那段時間已經加載完了，所以說，這個LazyLoad不是真正的延時加載，而是實現了那樣的效果欺騙了你的感情而已。
既然是開源的組件，那么可以為我所用，且看我怎么優化代碼，勸浪子回頭：
打開LazyLoad的腳本，找到紅色框的部分，第一處注視掉，第二處為增加的代碼。然后頁面上圖片的寫法也有所改變；
原來的寫法是：<img src=”A.jpg” />
現在修改為這：<img original=”A.jpg” src=”loading.gif” />
現在，你再用剛才那個方法試試看，實現了真正的延時加載，而不僅僅是效果。
dotnetgeek（這個是我除了博客園外同步更新的博客） 提供已經修改好的源碼，親測可用：百度網盤下載地址