图片懒加载

编写代码实现图片的懒加载

1. 前端性能优化的重要方案
   通过图片或者数据的延迟加载,我们可以加快页面的渲染的速度,让第一次打开页面的速度变快
   只有滑动到某一个区域 我们才加载真实的图片 这样也可以节省加载的流量
2. 处理方案
   把所有需要延迟加载的图片用一个盒子包起来,设置宽高和默认占位图
   开始让所有的IMG的src为空,把真实图片的地址放在IMG的自定义属性上,让IMG隐藏
   等到所有其他资源加载完成后 我们再开始加载图片
   对于很多图片 需要当页面滚动的时候,当前图片区域完全显示出来后再加载真实图片

代码的实现

// 获取所有的图片标签
const imgs =document.getElementsByTagName('img')
// 获取可是区域的高度
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
// num 用于统计当前显示到哪一张图片 避免每次都从第一张图片开始检查是否露出
let num = 0
function lazyload(){
    for(let i = num;i<imgs.length;i++){
        // 用可视区高度减去元素顶部距离可视区顶部的高度
        //getBoundingClientRect用于获取某个元素相对于视窗的位置集合
        let distance = viewHeight - imgs[i].getBoundingClientRect().top
        // 如果可视区高度大于等于元素顶部距离可视区的高度,说明元素露出
        if(distance >= 0){
            // 给元素写入真是的src 展示图片
            imgs[i].src = imgs[i].getAttribute('data-src')
            // 前i张图片已经加载完毕 下次从第i+1张开始检查是否露出
            num = i+1
        }
    }
}