js实现图片懒加载，图片预加载

预加载(进度)

比如一些公众号h5宣传页面，受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏；进入页面的时候把图片全加载一遍，就不会出现图片加载慢显示慢的情况

效果图：
在这里插入图片描述

<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默认值告诉用户正在加载中。

效果图：(随着页面的滚动按需加载图片)

在这里插入图片描述

<!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实现图片懒加载，图片预加载

预加载(进度)

懒加载(进度)

猜你喜欢