js實現圖片的懶加載

原文地址：https://blog.phyer.cn/article...。歡迎你們訪問個人博客(●ˇ∀ˇ●)

// 防抖

let lazy_timer;
window.addEventListener('scroll', function () {
　　if (lazy_timer !== null){
　　　　clearTimeout(lazy_timer)
　　}
　　lazy_timer = setTimeout(function () {
　　　　load_lazy();
　　}, 100)
});
// 必須在window.onload裏主動調用一次
load_lazy();

// 懶加載
function load_lazy() {
　　$('.lazy-img:not([data-l])').each(function () {
　　　　let y = this.getBoundingClientRect().top;
　　　　if ((y+this.offsetHeight >= 0 && y <= document.body.clientHeight) || this.getAttribute('data-main') === 't') {
　　　　　　this.src = this.getAttribute('data-s');
　　　　　　this.setAttribute('data-l', '');
　　　　}
　　});
}

以上代碼很簡潔，主要就是三點

•  對須要懶加載的圖片，src設置loading.gif，data-s設置成本來的src，加載後設置data-l用於分辨是否已加載。
•  監聽scroll事件，若是圖片進入了視野便執行替換src，此處注意防抖。
• 對須要懶加載的圖片，最好加上onerror事件。當加載失敗時，圖片的佔有空間(瀏覽器通常會放一個破碎的圖片)和實際大小不符，致使下面的圖片已經到了視野中，卻沒有被加載，就是這樣:
•