Skip to content

mangreen/Delay_Loading_Images

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Delay_Loading_Images

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

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

About

圖片延遲加载

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published