js圖片延遲加載(Lazyload)三種實現(xiàn)方式
延遲加載也稱為惰性加載,即在長網(wǎng)頁中延遲加載圖像。
用戶滾動到它們之前,視口外的圖像不會加載。
這與圖像預(yù)加載相反,在長網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快。
在某些情況下,它還可以幫助減少服務(wù)器負載。
延遲加載的優(yōu)點:
提升用戶的體驗,如果圖片數(shù)量較大,打開頁面的時候要將將頁面上所有的圖片全部獲取加載,很可能會出現(xiàn)卡頓現(xiàn)象,影響用戶體驗。因此,有選擇性地請求圖片,這樣能明顯減少了服務(wù)器的壓力和流量,也能夠減小瀏覽器的負擔。
方法一
將頁面上所有圖片的src屬性設(shè)置為loading.gif,而圖片的真實路徑則設(shè)置在data-src屬性中。
當頁面滾動的時候計算圖片位置和滾動的位置,當圖片出現(xiàn)在瀏覽器視口內(nèi)時,將圖片的src屬性設(shè)置為data-src的值。
<img src="loading.png" data-src="image.png">
img { display: block; margin-bottom: 50px; }
function lazyload() { var images = document.getElementsByTagName('img'); var n = 0; // 用于存儲圖片加載到的位置,避免每次都從第一張圖片開始遍歷 return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < images.length; i++) { if (images[i].offsetTop < seeHeight + scrollTop) { if (images[i].getAttribute('src') === 'loading.png') { images[i].src = images[i].getAttribute('data-src'); } n = n + 1; } } } } lazyload(); //初始化首頁的頁面圖片 window.addEventListener('scroll', lazyload(), false);
方法二
上面的方法雖然沒什么問題,但是性能較差,因為當頁面滾動時,scroll事件會高頻觸發(fā),這非常影響瀏覽器性能。
所以,這里要對lazyload函數(shù)進行函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)處理。
函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
這里html和css代碼不變,經(jīng)過throttle處理的js代碼如下:
function throttle (fn, delay, atleast) { var timeout = null, startTime = new Date(); return function () { var curTime = new Date(); clearTimeout(timeout); if (curTime - startTime >= atleast) { fn (); startTime = curTime; } else { timeout = setTimeout (fn, delay); } } } function lazyload() { var images = document.getElementsByTagName('img'), n = 0; //存儲圖片加載到的位置,避免每次都從第一張圖片開始遍歷 return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < images.length; i++) { if(images[i].offsetTop < seeHeight + scrollTop) { if(images[i].getAttribute('src') === 'loading.png') { images[i].src = images[i].getAttribute('data-src'); } n = n + 1; } } } } lazyload(); //初始化首頁的頁面圖片 window.addEventListener('scroll', throttle(lazyload(), 500, 1000), false);
方法三
目前有一個新的 IntersectionObserver API,可以自動"觀察"元素是否可見。
用這種方法實現(xiàn)代碼非常簡潔,但是許多瀏覽器不支持。
- IntersectionObserver 傳入一個回調(diào)函數(shù),當其觀察到元素集合出現(xiàn)時候,則會執(zhí)行該函數(shù)。
- io.observe 即要觀察的元素,要一個個添加才可以。
- io 管理的是一個數(shù)組,當元素出現(xiàn)或消失的時候,數(shù)組添加或刪除該元素,并且執(zhí)行該回調(diào)函數(shù)。
function query(selector) { return Array.from(document.querySelectorAll(selector)); } var io = new IntersectionObserver(function(items) { items.forEach(function(item) { var target = item.target; if(target.getAttribute('src') == 'loading.png') { target.src = target.getAttribute('data-src'); } }) }); query('img').forEach(function(item) { io.observe(item);
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用JavaScrpt實現(xiàn)文件夾簡單輕松加密的實現(xiàn)方法圖文
電腦里經(jīng)常會存儲著重要文件,這些文件需要進行加密,有許多方法來實現(xiàn)。但如果想對一個文件夾里的所有文件都進行加密,數(shù)量少還可以,要是數(shù)量多豈不是得把人累死?2008-09-09JavaScript 字符串常用操作小結(jié)(非常實用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識,包括字符串截取,查找類的方法,對js字符串操作相關(guān)知識感興趣的朋友一起學習吧2016-11-11TypeScript中type和interface的區(qū)別及注意事項
type的類型別用可以用戶其他的類型,比如聯(lián)合類型、元祖類型、基本類型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項的相關(guān)資料,需要的朋友可以參考下2022-10-10JavaScript數(shù)組去重實現(xiàn)方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組去重實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組去重ES3、ES5及ES6常見實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-01-01