滾動加載圖片（懶加載）實現原理

本文主要通過以下幾方面來說明懶加載技術的原理，個人前端小菜，有錯誤請多多指出

一、什么是圖片滾動加載？

　　通俗的講就是：當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。

二、為什要使用這個技術？

　　比如一個頁面中有很多圖片，如淘寶、京東首頁等等，如果一上來就發送這么多請求，頁面加載就會很漫長，如果js文件都放在了文檔的底部，恰巧頁面的頭部又依賴這個js文件，那就不好辦了。更為要命的是：一上來就發送百八十個請求，服務器可能就吃不消了（又不是只有一兩個人在訪問這個頁面）。

　　因此優點就很明顯了：不僅可以減輕服務器的壓力，而且可以讓加載好的頁面更快地呈現在用戶面前（用戶體驗好）。

三、怎么實現？

　　關鍵點如下：

      1、頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片（也就沒有請求咯，也就提高性能咯），一旦通過javascript設置了圖片路徑，瀏覽器才會送請求。有點按需分配的意思，你不想看，就不給你看，你想看了就給你看~

　　2、如何獲取正真的路徑，這個簡單，現在正真的路徑存在元素的“data-url”（這個名字起個自己認識好記的就行）屬性里，要用的時候就取出來，再設置；