DEMO：http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html

在頁面加載結束后，看到并沒有圖片加載的請求。

點擊按鈕之后執(zhí)行了加載圖片的操作，此時才在網(wǎng)絡中看到圖片的請求

這樣減少了加載頁面最開始的請求，減輕服務器的負載。

按需加載圖片

按需加載圖片，就是讓圖片默認開始不加載，而且在接近可視區(qū)域范圍時，再進行加載。也稱之為懶惰加載。大家都知道，圖片一下子全部都加載，請求的次數(shù)將會增加，勢必影響性能。

先來看下懶惰加載的實現(xiàn)原理。它的觸發(fā)動作是：當滾動條拉動到某個位置時，即將進入可視范圍的圖片需要加載。實現(xiàn)的過程分為下面幾個步驟：

1）生成標簽時，用data-src來保存圖片地址；

（相當于加載轉圈的圖片）

2）記錄的圖片data-src都保存到數(shù)組里；

（保存真正的圖片）

3）對滾動條進行事件綁定,假設綁定的函數(shù)為function lazyload(){};

4）在函數(shù)lazyload中，按照下面思路實現(xiàn)：計算圖片的Y坐標，并計算可視區(qū)域的高度height，當Y小于等于(height+ scrollTop)時，圖片的src的值用data-src的來替換，從而來實現(xiàn)圖片的按需加載；