您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關JS圖片懶加載怎么實現(xiàn),小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
圖片懶加載優(yōu)勢:
增強用戶體驗
優(yōu)化代碼
減少http的請求
減少服務器端壓力
服務器的按需加載
圖片懶加載原理:
先將圖片的src設置為同一張圖片或者不設置,同時給img標簽設置一個特殊屬性,例如:data-src用于存放圖片的真實預覽地址;若圖片未進入可視區(qū)域時,展示同一張圖片或者直接不展示圖片,此時就不會發(fā)生http請求,當圖片進入可視區(qū)域時,將data-src上的值賦給src,此時再發(fā)送http請求。
關鍵:判斷圖片是否進入到可視區(qū)域(關鍵函數(shù))
頁可見區(qū)域寬: document.body.clientWidth;
網(wǎng)頁可見區(qū)域高: document.body.clientHeight;
網(wǎng)頁可見區(qū)域寬: document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高: document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬: document.body.scrollWidth;
網(wǎng)頁正文全文高: document.body.scrollHeight;
網(wǎng)頁被卷去的高: document.body.scrollTop;
網(wǎng)頁被卷去的左: document.body.scrollLeft;
網(wǎng)頁正文部分上: window.screenTop;
網(wǎng)頁正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的寬: window.screen.width;
屏幕可用工作區(qū)高度: window.screen.availHeight;
當前元素相對于其 offsetParent 元素的頂部的距離: HTMLElement.offsetTop;
瀏覽器窗口的視口(viewport)高度(以像素為單位): window.innerHeight; (如果有水平滾動條,也包括滾動條高度)
代碼實現(xiàn)
html部分
<div> <img src="./img/1.jpg" data-src="./img/1.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/2.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/3.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/4.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/5.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/6.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/7.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/8.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/9.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/10.jpg" alt=""> </div>
js部分
window.onload = () => { // 獲取某節(jié)點與瀏覽器頂部的距離 function getTop(e) { if (!e) return return e.offsetTop } let imgs = document.getElementsByTagName('img') function lazyLoading(imgs) { // 可是區(qū)域高度 let innerHeight = window.innerHeight; // 滾動區(qū)域高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < imgs.length; i++) { // 圖片距離頂部的距離大于可視區(qū)域和滾動區(qū)域之和時加載 if (scrollTop + innerHeight > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src') } } } lazyLoading(imgs) window.onscroll = () => { lazyLoading(imgs) } }
關于“JS圖片懶加載怎么實現(xiàn)”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。