图片懒加载

Posted by Mars . Modified at Oct 10, 2021

图片懒加载原理和实现。

图片懒加载的原理

图片懒加载的基本原理：

1. 拿到所有的img元素；
2. 绑定 window 的 scroll 事件，对其进行事件监听；
3. 每次滚动，遍历每个img元素，判断当前img元素是否到了可视区范围内；
4. 如果到了，就修改图片的 src 属性。

实现

getBoundingRect()方法

const imgs = document.querySelectorAll('img');

// 加一个节流，防止频繁触发
function throttle(fn, delay = 500) {
    let prev = 0;
    return function(...args) {
        let now = Date.now();
        if (now - prev >= delay) {
            fn(...args);
            prev = now;
        }
    }
}

function loadImg(img) {
    if (img.dataset.src === '') return;
    img.src = img.dataset.src;
    img.dataset.src = '';
}

function lazyload() {
    const viewHeight = document.documentElement.clientHeight;
    for (let img of imgs) {
        let rect = img.getBoundingClientRect();
        if (rect.bottom > 0 && rect.top < viewHeight) {
            loadImg(img);
        }
    }
}

window.addEventListener('scroll', throttle(lazyload));
window.addEventListener('load', lazyload);

Keywords: Performance