圖片延遲加載技術目前已經被各種網站廣泛的使用，但最近的一篇《PS美女試驗的驚人結果 》文章中使用的卻是背景圖延遲加載技術。爲什麼要使用背景圖延遲加載技術？下面我們就來說一說這個問題。
之所以使用圖片延遲加載技術，是爲了避免浪費帶寬。有些頁面上嵌入了很多圖片(上面所說的《PS美女試驗的驚人結果 》裏就嵌入了30多張高清美女圖)，但電腦的屏幕一次只能顯示一張或頂多2張。而當用戶進入這個頁面時，正常情況下，這30多種圖片會全部一次性從服務器加載到客戶端，就造成的服務器的壓力，也給用戶的瀏覽器造成壓力，而且，也許用戶之看了前幾張圖片就退出去了，那其它圖片的加載就是浪費。
而使用圖片延遲加載技術時，隨着用戶向下滾動頁面，只有當圖片滾動到可視視窗內，或接近可視視窗時，這個圖片纔會從服務器加載。這樣就是儘可能的減少不必要的加載。
目前最流行的圖片延遲加載技術是使用Lazy Load Plugin for jQuery，它是一個非常輕量級的jQuery插件，只有2k多的體積。使用方法也非常簡單，只需要在圖片上這樣寫：
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
然後用一段js
$(function() { $("img.lazy").lazyload(); });
這樣，這個圖片就會只有當需要加載時纔會加載。
大多數人使用Lazy Load Plugin for jQuery，是用於image加載，但其實它還有一個很重要的功能，就是背景圖延遲加載。背景圖延遲加載的用法和圖片延時加載的用法很相似，首先，你需要使用背景的元素需要這樣寫：
<div class="lazy" data-original="img/example.jpg" width="640" height="480"></div>
然後用一段js
$(function() { $("div.lazy").lazyload(); });
這樣，只有當這個div出現在可視視窗內時，背景圖纔會加載顯示。
使用背景圖延時加載有什麼好處？
首先上面已經說了，可以避免不必要的資源浪費，頁面下部可視視窗外的很多元素也許用戶根本不會去查看，所以它們的背景圖也不必加載，只有當用戶看到它們時，纔去加載。
第二個好處就是減少機器人抓取網站時給服務造成的壓力。有很多網頁爬蟲會頻繁的訪問你的網站，它們不管遇到什麼資源都會抓取回去，頁面上的圖片它們最感興趣，往往圖片是最佔流量的。如果將圖片換成背景圖，這些爬蟲就無法識別，抓取不到這些圖片，減少了服務器的壓力。
你覺得如何？有沒有打算在你的頁面上也使用背景圖延遲加載技術？感興趣的程序員可以看看《PS美女試驗的驚人結果 》這個頁面上的背景圖延遲加載的效果。
