mangreen/delay_loading_images

圖片延遲加载

Delay_Loading_Images

圖片延遲加载 JS圖片延遲加載 圖片延遲加載也稱 "懶加載"，通常應用於圖片比較多的網頁，比如 "美麗說首頁"，"蘑菇街"等一些導購網站上用的比較多， 或者淘寶,京東等電子商務網站上也用的比較多，因為頁面加載時候 假如我們沒有用延遲加載的話 那麼頁面上很多圖片， 首先要發n多個請求，性能肯定不怎麼好，而我們用延遲加載技術，頁面打開時候 只加載第一屏數據， 第二屏以上都用延遲加載 滾動的時候進行加載，這樣的話 假如頁面不管他有n屏的話 那麼我們只管加載第一屏的數據， 後面不做操作。這樣就可以顯著的提高頁面的加載速度，提升用戶體驗。且更小的並發請求也可以減輕服務器的壓力， 而且如果用戶只瀏覽首屏的話，還可以節省流量(手機客戶端應該用的比較多，減少用戶流量)。

延遲加載的原理是？ 我這邊原理是先在img src中放一張佔位符圖片，而真實的圖片地址存放在相對應一個屬性 data-img(後綴img可以自定義)中， 這樣的話 那麼頁面加載的時候 只加載src地址 不會對屬性的圖片真正地址加載， 滾動時候判斷 待加載的資源相對於瀏覽器頂端的距離 <= 可視區域相對於瀏覽器頂端的距離 如果為true的話 則把相對應的data-img值賦值給src 否則不加載。