天天看點
傳回

js實作圖檔懶加載，圖檔預加載

歡迎點選: 個人官網部落格

預加載(進度)

比如一些公衆号h5宣傳頁面，受網速影響，頁面加載素材的時間比較長，頁面會出現短時間的錯亂或者閃屏； 進入頁面的時候把圖檔全加載一遍，就不會出現圖檔加載慢顯示慢的情況

效果圖：

js實作圖檔懶加載，圖檔預加載
<script>
    //頁面所有img标簽的集合
    let img = document.getElementsByTagName("img");
    function yuLoad() {
        let index = 0
        for (let i = 0; i < img.length; i++) {
            let src = img[0].getAttribute('src')
            let oImg = new Image()
            oImg.src = src
            oImg.onload = () => {
                index++
                if (index == img.length) {
                    setTimeout(begin, 500);
                    function begin() {
                        //全部加載完後執行
                    }
                    
                }
                //加載進度
                console.log(Math.floor(index / img.length * 100 )+ '%')
            }
        }

    }
  window.addEventListener('load', (e) => {
            let timing = performance.getEntriesByType('navigation')[0]
            let tti = timing.domInteractive - timing.fetchStart
            console.log(tti) //加載資源所花的時間
        })
  document.onreadystatechange = function () {
            if (document.readyState == 'complete') {
                console.log('ok') //加載資源完畢
                // isload=false
            }
        }
</script>
最後預加載如果使用插件的話可以試試 pace.js，preloadjs

懶加載(進度)

一張圖檔就是一個img标簽，浏覽器是否發起請求圖檔是根據img的src屬性，是以在圖檔沒有進入可視區域時，先不給img的src指派，真正路徑存儲在data-src屬性裡面，這樣浏覽器就不會發送請求了，等到圖檔進入可視區域再取出data-src屬性裡面的值給src指派,這裡可以統一用一張loading.png作為src預設值告訴使用者正在加載中。

效果圖：(随着頁面的滾動按需加載圖檔)

js實作圖檔懶加載，圖檔預加載
js實作圖檔懶加載，圖檔預加載
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
    <img src="./img/load.gif" data-src="./img/0.jpg" alt="">
</body>
<script>
    let img = document.getElementsByTagName("img");
    let count = img.length;

    lazyload(); //首次加載别忘了顯示圖檔

    window.addEventListener('scroll', ()=>{//頁面滾動事件
        setTimeout(()=>{
            lazyload()
        },500)//節個流
    });

    function lazyload() {
        let viewHeight = document.documentElement.clientHeight || document.body.clientHeight; //視口高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條卷去的高度
        let imgItem
        for (let index = 0; index < count; index++) {
            imgItem = img[index]
            if (imgItem.offsetTop < viewHeight + scrollTop) {
                if (imgItem.getAttribute('data-src')) {
                    imgItem.src = imgItem.getAttribute('data-src')
                    imgItem.removeAttribute('data-src')
                }
            }
        }
    }
</script>

</html>
最後懶加載如果使用插件的話可以試試 echo.js，lazy.js
js javascript 圖檔加載 懶加載 預加載
上一篇: js：圖檔懶加載
下一篇: 頁面加載loading

繼續閱讀