页面图片懒加载

图片的延迟加载(图片懒加载):提升页面第一次渲染的速度,让页面加载更快,也有助于页面的优化

图片懒加载实现的思路:

1.在最开始加载页面的时候,img的src属性不赋值(这样就不会加载真实图片,将图片地址赋值给img的自定义属性),方便后期获取真实图片时获取.

2.如果img的src属性不赋值或者图片加载不成功,就会出现碎图的现象,这样样式就会很不美观,所以:我们最开始先把img隐藏起来.可以设置diplay,也可以设置opacity为0(透明度可以设置过渡效果)

3.给img所在的盒子设置占位图或者背景颜色,在真实图片没有加载出来时,用其占位(事先设置好宽高)

什么时候加载?

1.在页面第一次渲染完的时候(其他资源加载完成,例如window.onload)

2.把出现在可视窗口内的图片进行懒加载

如何加载?

1.获取图片的自定义属性的值,拿到真实图片地址

2.给图片的src属性赋值真实图片地址,如果图片可以正常加载,则让img显示

以下是HTML源码

以下是JS源码

    let div = document.querySelector('.pic-box'),//先获取img的父级盒子
        img = div.querySelector('img'),//利用父级盒子获取img标签
        HTML = document.documentElement;//获取整个文档对象
    const lazy = function lazy() {
        let trueImg = img.getAttribute('data-img');//获取img自定义属性的真实图片地址
        img.src = trueImg;//将图片地址赋值给img的src属性
        img.onload = () => { //onload页面加载成功
                //真实图片加载成功
                img.style.opacity = 1;//将img标签显示出来
            }
            //设置自定义属性:证明当前图片已经处理过延迟加载了
        div.isload = true;
    };
    //计算何时加载(图片完全出现在可视窗口)
    const conmputed = function conmputed() {
        //如果图片之前已经处理过了,则无需再次处理了 直接终止函数执行
        if (div.isload) return;
        let C = HTML.clientHeight, //获取可视窗口高度
            {
                top: B, //获取盒子顶部距离可视窗口顶部的距离
                bottom: A, //获取盒子底部部距离可视窗口顶部的距离
            } = div.getBoundingClientRect();
            //返回一个对象,包含当前元素距离可视窗口的位置信息
        if (A <= C && B >= 0) {
        //如果A(盒子底部部距离可视窗口顶部的距离)小于等于C(可视窗口高度) 并且
        //B(盒子顶部距离可视窗口顶部的距离)大于等于0
            lazy();//执行图片懒加载函数
        }
    };
    //第一次其他资源加载完计算一次 & 页面滚动中随时计算
    //scroll事件会在浏览器滚动条滚动中进行触发,并且按照浏览器最快反应时间(一般5~7ms)的频率进行
    //触发!!例如:我们滚动100ms,按照5ms触发一次,一共触发20次!!"触发频率太快了",造成了没必要的计算
    //和性能消耗
    //此时我们需要"降低"触发频率 [我们不是降低浏览器的触发频率,而是把computed函数执行的频率降下来]
    //我们把此操作称之为"函数节流"
    window.onload = conmputed; //监听页面加载
    window.onscroll = utils.throttle(conmputed, 100); //监听滚动条