JS圖片懶載入的優點及實現原理
阿新 • • 發佈:2020-01-11
這篇文章主要介紹了JS圖片懶載入的優點及實現原理,文中通過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
圖片懶載入優勢:
增強使用者體驗
- 優化程式碼
- 減少http的請求
- 減少伺服器端壓力
- 伺服器的按需載入
圖片懶載入原理:
先將圖片的src設定為同一張圖片或者不設定,同時給img標籤設定一個特殊屬性,例如:data-src用於存放圖片的真實預覽地址;若圖片未進入可視區域時,展示同一張圖片或者直接不展示圖片,此時就不會發生http請求,當圖片進入可視區域時,將data-src上的值賦給src,此時再發送http請求。
關鍵:判斷圖片是否進入到可視區域(關鍵函式)
- 頁可見區域寬: document.body.clientWidth;
- 網頁可見區域高: document.body.clientHeight;
- 網頁可見區域寬: document.body.offsetWidth (包括邊線的寬);
- 網頁可見區域高: document.body.offsetHeight (包括邊線的寬);
- 網頁正文全文寬: document.body.scrollWidth;
- 網頁正文全文高: document.body.scrollHeight;
- 網頁被捲去的高: document.body.scrollTop;
- 網頁被捲去的左: document.body.scrollLeft;
- 網頁正文部分上: window.screenTop;
- 網頁正文部分左: window.screenLeft;
- 螢幕解析度的高: window.screen.height;
- 螢幕解析度的寬: window.screen.width;
- 螢幕可用工作區高度: window.screen.availHeight;
- 當前元素相對於其 offsetParent 元素的頂部的距離: HTMLElement.offsetTop;
- 瀏覽器視窗的視口(viewport)高度(以畫素為單位): window.innerHeight; (如果有水平滾動條,也包括滾動條高度)
程式碼實現
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 = () => { // 獲取某節點與瀏覽器頂部的距離 function getTop(e) { if (!e) return return e.offsetTop } let imgs = document.getElementsByTagName('img') function lazyLoading(imgs) { // 可是區域高度 let innerHeight = window.innerHeight; // 滾動區域高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < imgs.length; i++) { // 圖片距離頂部的距離大於可視區域和滾動區域之和時載入 if (scrollTop + innerHeight > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src') } } } lazyLoading(imgs) window.onscroll = () => { lazyLoading(imgs) } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。