JS實現圖片懶載入(lazyload)過程詳解
阿新 • • 發佈：2020-04-04
對於圖片較多的頁面，使用懶載入可以大幅提高頁面載入速度，提高使用者體驗。
懶載入的意義（為什麼要使用懶載入）
對頁面載入速度影響最大的就是圖片，一張普通的圖片可以達到幾M的大小，而程式碼也許就只有幾十KB。當頁面圖片很多時，頁面的載入速度緩慢，幾S鍾內頁面沒有載入完成，也許會失去很多的使用者。
所以，對於圖片過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入， 等到滾動到可視區域後再去載入。這樣子對於頁面載入效能上會有很大的提升，也提高了使用者體驗。
原理
將頁面中的img標籤src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張預設的圖片，否則當src為空時也會向伺服器傳送一次請求。可以指向loading的地址。
注：圖片要指定寬高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
當載入頁面時，先把可視區域內的img標籤的data-src屬性值負給src，然後監聽滾動事件，把使用者即將看到的圖片載入。這樣便實現了懶載入。
程式碼
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS實現圖片懶載入(lazyload)過程詳解">
</body>JavaScript
<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //儲存圖片載入到的位置，避免每次都從第一張圖片開始遍歷
lazyload(); //頁面載入完畢載入可是區域內的圖片
window.onscroll = lazyload;
function lazyload() { //監聽頁面滾動事件
var seeHeight = document.documentElement.clientHeight; //可見區域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>jQuery
<script>
var n = 0,imgNum = $("img").length,img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src",src);
n = i + 1;
}
}
}
}
</script>
使用節流函式進行效能優化
如果直接將函式繫結在scroll事件上，當頁面滾動時，函式會被高頻觸發，這非常影響瀏覽器的效能。
我想實現限制觸發頻率，來優化效能。
節流函式：只允許一個函式在N秒內執行一次。下面是一個簡單的節流函式：
// 簡單的節流函式
//fun 要執行的函式
//delay 延遲
//time 在time時間內必須執行一次
function throttle (fun,delay,time) {
let timeout
let startTime = new Date()
return function () {
let context = this
let args = Array.prototype.slice.call(arguments)
let curTime = new Date()
clearTimeout(timeout)
if (curTime - startTime >= time) {
// 如果達到了規定的觸發時間間隔，觸發 handler
fun.apply(context,args)
startTime = curTime
} else {
// 沒達到觸發間隔，重新設定定時器
timeout = setTimeout(function () {
fun.apply(context,args)
},delay)
}
}
};
// 實際想繫結在 scroll 事件上的 handler
function lazyload(event) {}
// 採用了節流函式
window.addEventListener('scroll',throttle(lazyload,500,1000));
使用去抖函式進行效能優化
去抖相比較節流函式要稍微簡單一點，去抖是讓函式延遲執行，而節流比去抖多了一個在一定時間內必須要執行一次。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。