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

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

 

本文主要經過如下幾方面來講明懶加載技術的原理，我的前端小菜，有錯誤請多多指出

1、什麼是圖片滾動加載？

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

2、爲什要使用這個技術？

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

　　所以優勢就很明顯了：不只能夠減輕服務器的壓力，並且可讓加載好的頁面更快地呈如今用戶面前（用戶體驗好）。

3、怎麼實現？

　　關鍵點以下：

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

　　二、如何獲取正真的路徑，這個簡單，如今正真的路徑存在元素的「data-url」（這個名字起個本身認識好記的就行）屬性裏，要用的時候就取出來，再設置；