什么是懶加載
懶加載算吩，又叫“延遲加載”留凭，英文名“l(fā)azy load”佃扼。
懶加載實際就是將頁面上所有的圖片都換成一個相同的路徑偎巢，當用戶滾動看到圖片時，再將路徑換成圖片的原路徑兼耀。
我們假設一個有頁面压昼，頁面上存在有很多的圖片求冷。當用戶加載這個頁面的時候，會展示出當前視窗的圖片窍霞，而用戶看不到的圖片匠题，則用相同的圖片去替代。用戶如果滾動不到之后的圖片但金，將不會被加載出來韭山，而當用戶滾動之后，后面的圖片會改成真實的圖片去展示冷溃。
那么使用懶加載的好處是什么呢钱磅？
- 節(jié)省流量，緩解瀏覽器的壓力
- 增強用戶體驗似枕，感覺更快速
如何實現一個懶加載
要實現一個懶加載盖淡，主要是實現兩個功能：一個是判斷當前元素是否出現在視窗內，另一個是將頁面中所有的圖片都用同一個路徑凿歼，等到用戶滾動頁面看到的時候褪迟，再換成真實的路徑。
1. 元素位置的判斷
如下圖所示：
view.png
我們假設紅色的框表示用戶看到的窗口答憔，窗口內有一段文字味赃，藍色的框表示整個頁面。頁面滾動到當前位置時攀唯，窗口內出現了這行字洁桌。
那么可以做判斷，當用戶滾動的距離（$(window).scrollTop()）侯嘀，加上窗口的距離（$(window).height()）大于等于當前元素在頁面的距離（$(node).offset().top）就表示當前元素出現在視窗內另凌。
2.更換圖片的路徑
我們可以將圖片的“假”路徑寫在scr中，用戶是看不到這些圖片的戒幔，將圖片的實際路徑寫在自定義的屬性中吠谢。當用戶滾動頁面看到圖片時，就將圖片的scr改成真實的诗茎，這樣用戶就能看到真實的圖片工坊。
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
下面我們簡單用jQuery來實現上述的效果
- 聲明一個函數
isShow，實現img在頁面位置的判斷
function isShow($node) {
return $node.offset().top <= $(window).scrollTop() + $(window).height()
}
- 聲明一個函數和
loadImg敢订，實現更換圖片路徑的功能
function loadImg($img) {
$img.attr('src', $img.attr('data-src'))
}
- 最后綁定一個滾動事件王污，實現整個懶加載的功能
$(window).on('scroll', function () {
$('.container img').each(function () {
var $node = $(this)
if (isShow($node)) {
loadImg($node)
}
})
})
這樣一個簡單的懶加載功能就實現啦
