看到很多大型的網站，都實現了圖片延遲加載，即在瀏覽器的可視範圍內才加載圖片。這樣最大的一個好處就是節約帶寬提高用戶體驗，特別是對於訪問量高的大型網站就顯得尤爲重要，往往大部分網站的流量都是圖片大於文本內容，因此網站圖片資源優化可以有很大的提升空間。
在說網站圖片延遲加載前，先說下網站圖片上傳的處理。一般網站上傳圖片會保存原圖，如果網站有多個尺寸規格的需要顯示，還要按需生成不同大小的縮略圖，這樣做的好處就是之後可以快速使用訪問，缺點是難以管理這些縮略圖，增加了存儲成本，算是“以空間換時間”。另外還有一種做法是“以時間換空間”，網站圖片上傳只保存原圖，縮略圖按需根據原圖動態生成，這樣會增加程序處理的一些成本，但可以換取更多空間。具體採用那種方式就因網站需要綜合考慮的，目前我網站上傳圖片採用了比較懶的做法都只保留了原圖。
延遲加載方式
回到網頁圖片延遲加載上來。爲了不修改原來網頁的圖片輸出代碼，同時也考慮到客戶端可能禁止JavaScript的情況，我這裏的圖片延遲加載提供了2種方式，一種是直接使用img的src加載，另外一種是使用自定義屬性中的路徑加載。第1種方式不需要修改原來代碼，只需要在圖片延遲加載處引用腳本，通過JavaScript獲取指定延遲加載區域的img，移除img的src屬性，待到頁面可視區域再加載。這樣有個問題就是到JavaScript執行延遲加載時，img下載請求已經發出來，或是圖片已加載完了，所以只有那些還沒來得急下載完成的圖片才需要延遲加載。使用另外一種方式就可以很好的避免這個問題，就是用使用自定義屬性來保存延遲加載路徑，原img的src屬性使用一個透明或其它圖片代替，待到頁面可視區域再設置回原來得img路徑，這樣就實現了真正的按需來延遲加載，這個就要求服務器在返回html代碼中img標籤就必須包含延遲加載路徑的自定義屬性。
延遲加載定位計算
在設置指定延遲加載區域後，需要監聽窗口滾動和大小縮放事件，以便判斷圖片是否在當前可視範圍內需要加載。這個地方有幾個寬高度值要計算，一個是img本身在doucment中的定位座標，另外還有整個doucment的寬高度、滾動條寬高度、可視範圍寬高度。判斷圖片是否在當前可視範圍內的條件爲：img.x + img.width >= scrollLeft && img.x <= scrollLeft + window.width && img.y + img.height >= scrollTop && img.y <= scrollTop + window.height。其中img(x, y)是通過元素offsetParent計算出來的座標定位，scrollLeft、scrollTop是滾動的寬高度，window(width, height)是可視範圍寬高度，如下圖所示。
這裏考慮到img本身的寬高度情況，在圖片延遲加載時最好可以預設圖片的寬高度，這樣可以充分準確地計算定位延遲加載，如果需要獲取原圖片寬高度可以預加載圖片。另外我這裏還採用了JavaScript定時器，主要是考慮原本有些圖片在可視範圍內可能是隱藏不顯示的，當某些腳本事件觸發時又顯示出來了，這個時候圖片也需要延遲加載。
我目前實現的圖片延遲加載還算是比較簡單的，定位計算部分的採用了jQuery中一些方法，這裏下載ImgLazy.js圖片延遲加載腳本。腳本使用直接在需要延遲加載的地方引用調用JavaScript函數，參數可選指定延遲加載區域、自定義屬性名稱等。
<script type="text/javascript" src="http://www.jonllen.com/scripts/ImgLazy.js" > <script type="text/javascript">new ImgLazy();</script>
最後，再總結下圖片延遲加載的優點，在不影響用戶體驗的同時，還減少了服務器流量壓力。其實延遲加載不僅僅用於圖片，比如QQ空間的動態信息也是拉滾動條顯示更多的動態信息，包括微博信息列表等，這些都有這種思想在裏面，即按需取所需，最大限度的優化體驗！
