js案例--图片加载延迟

最新推荐文章于 2022-11-07 16:55:00 发布

weixin_47204963

最新推荐文章于 2022-11-07 16:55:00 发布

阅读量259

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_47204963/article/details/113139612

版权

图片加载案例总结：
1.遍历所有的图片，滚动条滚动时绑定事件判断图片顶部距离视口的距离<视口距离是否成立；并判断图片是否已经加载过
2.将藏在图片自定义中的属性，设置为加载出来的图片路径
3.滚动条未滚动时，提前判断一次
4.需要注意的是，图片背景图的设置会提高用户体验


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片延迟加载</title>
    <style>
        .container {
            margin: 0 auto;
            width: 1000px;
        }
        .images {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .images img{
            margin: 20px 0;
            width: 220px;
            height: 220px;
            background: url(images/loadingImg.gif) no-repeat center;
            /* border: 1px solid #ccc; */
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="images">
            <!-- 通常将一些路径或者信息啥的存在自定义属性中 -->
            <img data-src="images/1.jpg" alt="">
            <img data-src="images/2.jpg" alt="">
            <img data-src="images/3.jpg" alt="">
            <img data-src="images/4.jpg" alt="">
            <img data-src="images/5.jpg" alt="">
            <img data-src="images/6.jpg" alt="">
            <img data-src="images/7.jpg" alt="">
            <img data-src="images/8.jpg" alt="">
            <img data-src="images/9.jpg" alt="">
            <img data-src="images/1.jpg" alt="">
            <img data-src="images/2.jpg" alt="">
            <img data-src="images/3.jpg" alt="">
            <img data-src="images/4.jpg" alt="">
            <img data-src="images/5.jpg" alt="">
            <img data-src="images/6.jpg" alt="">
            <img data-src="images/7.jpg" alt="">
            <img data-src="images/8.jpg" alt="">
            <img data-src="images/9.jpg" alt="">
            <img data-src="images/1.jpg" alt="">
            <img data-src="images/2.jpg" alt="">
            <img data-src="images/3.jpg" alt="">
            <img data-src="images/4.jpg" alt="">
            <img data-src="images/5.jpg" alt="">
            <img data-src="images/6.jpg" alt="">
            <img data-src="images/7.jpg" alt="">
            <img data-src="images/8.jpg" alt="">
            <img data-src="images/9.jpg" alt="">
        </div>
    </div>
    <script>
        var imgs = document.querySelectorAll('img')

        //页面打开时就要先调一次
        roadImage();

        //当滚动滚动条时，判断图片是否出现在视口位置
        window.onscroll = roadImage;

        function roadImage(){
            //图片顶端距离视口的位置<视口的高度；图片出现在视口中
            imgs.forEach(function(item){
                //如果已经加载过，则需在滚动条滚动时再进行判断
                if(item.src.length > 0){
                    return
                }
                if(item.getBoundingClientRect().y < document.documentElement.clientHeight){
                    item.src = item.dataset.src;                    
                }
            })
        }
    </script>
</body>
</html>