單張圖片懶載入

/*
        圖片漏出一半的時候 把圖片的地址換成真實地址，顯示真實圖片 其他時候顯示預設圖片
        螢幕最低邊到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)
        }
複製程式碼