關於圖片img的Lazyload

定義:延遲加載也稱爲惰性加載,即在長網頁中延遲加載圖像。用戶滾動到它們以前,視口外的圖像不會加載。這與圖像預加載相反,在長網頁上使用延遲加載將使網頁加載更快。在某些狀況下,它還能夠幫助減小服務器負載。html

舉個例子來講明,當打開淘寶首頁的時候,只有在瀏覽器窗口裏的圖片纔會被加載,當你滾動首頁向下滑的時候,進入視口內的圖片纔會被加載,而其它從未進入視口的圖像不會也不會加載。瀏覽器

那麼延遲加載有什麼好處:服務器

  1. 首先它能提高用戶的體驗,試想一下,若是打開頁面的時候就將頁面上全部的圖片所有獲取加載,若是圖片數量較大,對於用戶來講簡直就是災難,會出現卡頓現象,影響用戶體驗。
  2. 有選擇性地請求圖片,這樣能明顯減小了服務器的壓力和流量,也可以減少瀏覽器的負擔。

那麼下面就介紹延遲加載的三種實現方式:閉包

第一種:spa

首先將頁面上的圖片的 src 屬性設爲 loading.gif,而圖片的真實路徑則設置在 data-src 屬性中,頁面滾動的時候計算圖片的位置與滾動的位置,當圖片出如今瀏覽器視口內時,將圖片的 src 屬性設置爲 data-src 的值,這樣,就能夠實現延遲加載。code

下面是具體的實現代碼:htm

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lazyload 1</title> <style> img { display: block; margin-bottom: 50px; height: 200px; } </style> </head> <body> <img src="images/loading.gif" data-src="images/1.png"> <img src="images/loading.gif" data-src="images/2.png"> <img src="images/loading.gif" data-src="images/3.png"> <img src="images/loading.gif" data-src="images/4.png"> <img src="images/loading.gif" data-src="images/5.png"> <img src="images/loading.gif" data-src="images/6.png"> <img src="images/loading.gif" data-src="images/7.png"> <img src="images/loading.gif" data-src="images/8.png"> <img src="images/loading.gif" data-src="images/9.png"> <img src="images/loading.gif" data-src="images/10.png"> <img src="images/loading.gif" data-src="images/11.png"> <img src="images/loading.gif" data-src="images/12.png"> <script> function lazyload() { var images = document.getElementsByTagName('img'); var len = images.length; var n = 0; //存儲圖片加載到的位置,避免每次都從第一張圖片開始遍歷 return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < len; i++) { if(images[i].offsetTop < seeHeight + scrollTop) { if(images[i].getAttribute('src') === 'images/loading.gif') { images[i].src = images[i].getAttribute('data-src'); } n = n + 1; } } } } var loadImages = lazyload(); loadImages(); //初始化首頁的頁面圖片 window.addEventListener('scroll', loadImages, false); </script> </body> </html> 

比較 image 的 offsetTop 與 seeHeight + scrollTop 的大小,當小於時則說明圖片已經出現過在視口中,這時候繼續判斷圖片是否已經替換過,若是沒有替換過,則進行替換。圖片

實現的效果:不斷滑動頁面時,圖片延遲加載ip

 

上面的代碼用到了 JS 閉包的知識,若是你不太熟悉的話,能夠自行百度一下。get

相關文章
相關標籤/搜索