页面图片懒加载实例代码

在页面如何进行首屏优化提到了图片懒加载。这边就写个图片懒加载供大家参考。 注意点有三个

1. <img> 要使用 data-src（或其他属性）记录 src 。还有，loading.gif 要自定义，要配合实际图片的尺寸。
2. 使用 Element.getBoundingClientRect() 来判断当前元素的位置。然后比对window.innerHeight值.这里可以加上一定数值。这样在下载的时候页面最下方的图片也可以出来。滚动时候更有利于用户体验。 3.页面滚动实时计算，注意节流。

<img src="./loading.gif" data-src="./img/test.jpeg"/>
funciton imageLoad(){
    const images = document.querySelectorAll('img[data-src]');
    if(images.length === 0) return;
    images.forEach(img => {
        const rect = img.getBoundingClientRect();
        if(rect.top < window.innerHeight + 30){
            img.src = img.dataset.src;
            img.removeAttribute('data-src')
        }
    })
}

调用的时候注意节流。页面初始时候需要先调用一次。 最后介绍一下innerHeight、outerHeight 、offsetHeight scrollHeight clientHeight innerHeight 和 outerHeight 是window 对象的只读属性， clientHeight 和 offsetHeight 是DOM 元素属性

• window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
• window.outerHeight: 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

• offsetHeight - border + padding + content
• clientHeight - padding + content
• scrollHeight - padding + 实际内容的高度