<ul>
    <li><img src="../img/loading.gif" alt="" data-src="../img/1.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/2.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/3.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/4.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/5.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/6.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/7.jpg"></li>
    <li><img src="../img/loading.gif" alt="" data-src="../img/8.jpg"></li>
</ul>

    /*元素距離頂部的高度-頁(yè)面被卷去的高度<=瀏覽器可視區(qū)域的高度
    如果條件滿足，就可以替換圖片的src屬性
    */
   //獲取圖片
    const imgArr = document.querySelectorAll("img");
    //初始化執(zhí)行
    lazyLoad();
    //監(jiān)聽(tīng)用戶是否滾動(dòng)滾動(dòng)條，但是這高觸發(fā)事件，所以需要結(jié)合節(jié)流優(yōu)化
    window.addEventListener("scroll", throttle(lazyLoad, 2000));
    function lazyLoad() {
        imgArr.forEach(item => {
            //1、獲取圖片距離頂部的高度
            const imgOffsetTop = item.offsetTop;
            //2、獲取瀏覽器的可視區(qū)域的高度
            const wHeight = window.innerHeight;
            //3、獲取頁(yè)面被卷去的高度
            const scrollHeight = document.documentElement.scrollTop;
            //判斷圖片是否將要出現(xiàn)
            if (imgOffsetTop - scrollHeight <= wHeight) {
                item.src = item.getAttribute("data-src");
            }
        })
    }
    //節(jié)流
    function throttle(fun, time = 250) {
        let lastTime = 0;//最后一次執(zhí)行的時(shí)間
        return function (...args) {
            const now = new Date().getTime();//獲取當(dāng)前的時(shí)間
            if (now - lastTime >= time) {
                fun();
                lastTime = now;
            }
        }
    }

    const imgArr = document.querySelectorAll("img");
    //初始化執(zhí)行
    lazyLoad()
    //監(jiān)聽(tīng)用戶是否滾動(dòng)滾動(dòng)條，但是這高觸發(fā)事件，所以需要結(jié)合節(jié)流優(yōu)化
   //監(jiān)聽(tīng)用戶是否滾動(dòng)滾動(dòng)條，但是這高觸發(fā)事件，所以需要結(jié)合節(jié)流優(yōu)化
    window.addEventListener("scroll", throttle(lazyLoad, 2000));
    function lazyLoad() {
        imgArr.forEach(item => {
            //獲取圖片和頂部的高度
            const imgTop = item.getBoundingClientRect().top;
            //獲取瀏覽器可視化區(qū)域高度
            const wHeight = window.innerHeight;
            //圖片和頂部的高度小于瀏覽器窗口可視化區(qū)域的高度
            if (imgTop <= wHeight) {
                //getAttribute獲取自定義屬性
                // item.src = item.getAttribute("data-src");
                //也可以使用dataset來(lái)獲取自定義屬性的值
                item.src = item.dataset.src;
            }
        })
    }
    //節(jié)流
    function throttle(fun, time = 250) {
        let lastTime = 0;//最后一次執(zhí)行的時(shí)間
        return function (...args) {
            const now = new Date().getTime();//獲取當(dāng)前的時(shí)間
            if (now - lastTime >= time) {
                fun();
                lastTime = now;
            }
        }
    }

    const callback = (res) => {
        //res是一個(gè)數(shù)組，所以還需要遍歷
        console.log(res);
        res.forEach(item => {
            //isIntersecting是否在可視區(qū)域展示
            if (item.isIntersecting) {
                //獲取圖片的自定義屬性并賦值給src
                item.target.src = item.target.dataset.src;
                //替換為真是src地址后取消對(duì)它的觀察
                observe.unobserve(item.target);
            }
        })
    }
    //1、實(shí)例化構(gòu)造函數(shù)
    const observe = new IntersectionObserver(callback);
    const imgArr = document.querySelectorAll("img");
    //遍歷所有的圖片，給每個(gè)圖片添加觀察
    imgArr.forEach(item => {
        //觀察圖片
        observe.observe(item)
    })

<div>
    <p></p>
    <img src="../img/1.jpg" alt="">
</div>
<script type="text/javascript">
    const imgArr = ["../img/2.jpg", "../img/3.jpg", "../img/4.jpg", "../img/5.jpg", "../img/6.jpg", "../img/7.jpg"]
    const img = document.querySelector("img");
    const p = document.querySelector("p");
    //定義默認(rèn)的index的值
    let index = 0;
    p.innerHTML = `實(shí)現(xiàn)預(yù)加載的效果，我是第${index + 1}張圖片`;
    img.addEventListener("click", (e) => {
        if (index < imgArr.length) {
            img.src = imgArr[index];
            index++;
            p.innerHTML = `實(shí)現(xiàn)預(yù)加載的效果，我是第${index + 1}張圖片`;
            if (index < imgArr.length) {
                //切換圖片后，同時(shí)讓瀏覽器提前加載下一張圖片
                preLoad(imgArr[index])
            }
        } else {
            confirm("沒(méi)有圖片了")
        }
    }, false)
    //調(diào)用預(yù)加載函數(shù)，頁(yè)面一開(kāi)始就加載數(shù)組的第一個(gè)元素
    preLoad(imgArr[0])
    //定義預(yù)加載函數(shù)
    function preLoad(src) {
        //當(dāng)圖片失去焦點(diǎn)后
        img.addEventListener("load", () => {
            //創(chuàng)建一個(gè)新的img標(biāo)簽
            const imgNew = document.createElement("img");
            //給img標(biāo)簽添加src屬性為我們傳進(jìn)來(lái)的src
            imgNew.src = src;
        })
    }
</script>