圖片懶載入 滾動載入圖片（懶載入）實現原理
滾動載入圖片（懶載入）實現原理
本文主要通過以下幾方面來說明懶載入技術的原理，個人前端小菜，有錯誤請多多指出
一、什麼是圖片滾動載入？
通俗的講就是：當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次），只有當圖片出現在瀏覽器的可視區域內時，才設定圖片正真的路徑，讓圖片顯示出來。這就是圖片懶載入。
二、為什要使用這個技術？
比如一個頁面中有很多圖片，如淘寶、京東首頁等等，如果一上來就傳送這麼多請求，頁面載入就會很漫長，如果js檔案都放在了文件的底部，恰巧頁面的頭部又依賴這個js檔案，那就不好辦了。更為要命的是：一上來就傳送百八十個請求，伺服器可能就吃不消了（又不是隻有一兩個人在訪問這個頁面）。
因此優點就很明顯了：不僅可以減輕伺服器的壓力，而且可以讓載入好的頁面更快地呈現在使用者面前（使用者體驗好）。
三、怎麼實現？
關鍵點如下：
1、頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片（也就沒有請求咯，也就提高效能咯），一旦通過javascript設定了圖片路徑，瀏覽器才會送請求。有點按需分配的意思，你不想看，就不給你看，你想看了就給你看~
2、如何獲取正真的路徑，這個簡單，現在正真的路徑存在元素的“data-url”（這個名字起個自己認識好記的就行）屬性裡，要用的時候就取出來，再設定；
本文主要通過以下幾方面來說明懶載入技術的原理，個人前端小菜，有錯誤請多多指出
一、什麼是圖片滾動載入？
通俗的講就是：當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次），只有當圖片出現在瀏覽器的可視區域內時，才設定圖片正真的路徑，讓圖片顯示出來。這就是圖片懶載入。
二、為什要使用這個技術？
比如一個頁面中有很多圖片，如淘寶、京東首頁等等，如果一上來就傳送這麼多請求，頁面載入就會很漫長，如果js檔案都放在了文件的底部，恰巧頁面的頭部又依賴這個js檔案，那就不好辦了。更為要命的是：一上來就傳送百八十個請求，伺服器可能就吃不消了（又不是隻有一兩個人在訪問這個頁面）。
因此優點就很明顯了：不僅可以減輕伺服器的壓力，而且可以讓載入好的頁面更快地呈現在使用者面前（使用者體驗好）。
三、怎麼實現？
關鍵點如下：
1、頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片（也就沒有請求咯，也就提高效能咯），一旦通過javascript設定了圖片路徑，瀏覽器才會送請求。有點按需分配的意思，你不想看，就不給你看，你想看了就給你看~
2、如何獲取正真的路徑，這個簡單，現在正真的路徑存在元素的“data-url”（這個名字起個自己認識好記的就行）屬性裡，要用的時候就取出來，再設定；