单张图片懒加载

/*
        图片漏出一半的时候 把图片的地址换成真实地址，显示真实图片 其余时候显示默认图片
        屏幕最低边到body的偏移量changeT 跟  元素顶边到body的偏移量t  对比
        当changeT > t+ h/2 说明一半漏出来了
        */
懒加载要用到下面工具库的东西 提早封装好
var utils = {
    getCss(ele, attr) {//获取ele的attr属性
        var str = getComputedStyle(ele)[attr];
        if (/width|height|top|margin|padding|left/.test(attr)) {
            return psrseFloat(str);
        }
        return str;
    },

    setCss(ele, attr, val) {
        if (/width|height|top|margin|padding|left/.test(attr)) {
            ele.style[attr] = parseFloat(val) + 'px';
        } else {
            ele.style[attr] = val;
        }
    },

    winH() {
        //获取当前屏幕的高度
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        //获取当前屏幕的宽度
        var w = document.documentElement.clientWidth || document.body.clientWidth;
        return {
            w,
            h
        }
    }, 

    offset(ele) {
        // 求出 ele到 body的偏移量
        let l = ele.offsetLeft,
            t = ele.offsetTop;
        let temp = ele.offsetParent;
        while (temp) {
            l += temp.offsetLeft + temp.clientLeft;
            t += temp.offsetTop + temp.clientTop;
            temp = temp.offsetParent;
        }
        return {
            l,
            t
        }
    }

}
代码实现
function loadImg(ele) {
            if (ele.flag) return
            let scT = document.body.scrollTop || document.documentElement.scrollTop;//卷去的高度
            let wH = utils.winH().h;//一屏幕的高度
            let t = utils.offset(ele).t;//当前元素到body的高度
            let h = ele.clientHeight
            if (scT + wH > t + h / 2) {//书名图片漏出一半
                console.log('666')
                ele.flag = true;
                // ele.src='https://img30.360buyimg.com/pop/s1180x940_jfs/t1/75497/1/9466/47740/5d723977E9c245206/5b7de79a5c375937.jpg.webp '
                let temp = new Image();

                let realSrc = ele.getAttribute('realSrc')
                temp.src = realSrc;
                temp.onload = function () {
                    //这张图片加载完成后会触发该函数的onload
                    ele.src = realSrc
                    fadeIn(ele);//真实图片出来的时候 执行渐变效果
                    temp = null;
                }
            }

        }

        function fadeIn(ele) {
            //让图片的opacity从0到1
            ele.style.opacity = 0;
            let n = 0;
            ele.timer = setInterval(() => {
                n += 0.01
                if (n >= 1) {
                    n = 1;
                    clearInterval(ele.timer);
                }
                ele.style.opacity = n;
            }, 50)
        }
复制代码