案例——图片的延迟加载（又称懒加载）

最新推荐文章于 2023-07-26 09:24:11 发布

、小会

最新推荐文章于 2023-07-26 09:24:11 发布

阅读量384

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/gmh1118/article/details/113802688

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

图片的延迟加载（图片的懒加载）

图片的延迟加载是前端优化的重要手段之一，开始加载页面的时候，并没有真实的图片，当页面结构和数据都呈现完成后，在加载真实的图片

步骤：

在结构上，我们把img图片放到div盒子中，开始的时候图片的src为空，我们就把图片的地址存放到自定义属性 data-src中，我们给图片所在的盒子设置一个默认的背景图片占位（要求这张图越小越好 1KB）

在JS中，当监听到页面中的结构和数据都加载完成后（或者设置一个间隔时间），开始把data-src自定义属性中存储的真实图片地址赋值给img的src属性

=>为了防止图片地址不存在导致的404错误，我们在赋值图片的src属性时，往往都会验证一下图片是否存在

多张图片的延时加载

获取数据
数据绑定到HTML中
加载真实图片
window页面加载完成或滚动时计算哪张图片可以加载
加载单张图片
优化：图片加载之后，防止图片的再次加载，需要“重复操作限定”

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>多张图片的延迟加载</title>
    <style>
        .container {
            margin: 20px auto;
            width: 1000px;
        }
        
        .container .imgBox {
            margin-bottom: 20px;
            height: 300px;
            background: url("img/default.jpg") no-repeat center center #EEE;
        }
        
        .container .imgBox img {
            display: none;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <div class="imgBox">
            <img src="" alt="" data-src="">
        </div> -->
    </div>
    <script src="jQuery.js"></script>
    <script>
        $(function() {
            let $container = $('.container'),
                $imgList = null;
            //1. 先绑定数据
            let bindHTML = () => {
                let str = ``;
                for (let i = 0; i < 100; i++) {
                    str += `<div class="imgBox">
            <img src="" alt="" data-src="img/${Math.round(Math.random()*2+1)}.jpg">
        </div>`;
                }
                $container.html(str);
                $imgList = $container.find('img');
            };
            //2. 加载真实图片
            //lazyImg：单张图片的加载
            let lazyImg = curImg => {
                let $curImg = $(curImg),
                    trueImg = $curImg.attr('data-src');
                let tempImg = new Image();
                tempImg.onload = function() {
                    //无动画
                    // $curImg.attr('src', trueImg).css({
                    //     display: 'block'
                    // });
                    //有动画
                    $curImg.attr('src', trueImg)
                        .stop().fadeIn(300); //结束当前正在运行的动画，执行fadeIn，让图片300ms内渐现出来
                    tempImg = null;
                    curImg.isLoad = true; //优化处理：图片加载之后防止图片的再次加载
                };
                tempImg.src = trueImg;

            };

            //conputedImg:计算哪张图片可以加载了
            let computedImg = () => {
                $imgList.each((index, curImg) => {
                    //A:当前图片底边的上偏移
                    //B:当前浏览器底边的上偏移
                    let $curImg = $(curImg),
                        $imgBox = $curImg.parent(),
                        A = $imgBox.offset().top + $imgBox.outerHeight(),
                        B = document.documentElement.scrollTop + document.documentElement.clientHeight;
                    if (A < B) {
                        if (curImg.isLoad) {
                            return;
                        }
                        lazyImg(curImg);
                    }
                });

            };
            bindHTML();
            $(window).on('load scroll', computedImg);

        });
    </script>
</body>

</html>

、小会

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例——图片的延迟加载（又称懒加载）

图片的延迟加载（图片的懒加载）图片的延迟加载是前端优化的重要手段之一，开始加载页面的时候，并没有真实的图片，当页面结构和数据都呈现完成后，在加载真实的图片步骤：在结构上，我们把img图片放到div盒子中，开始的时候图片的src为空，我们就把图片的地址存放到自定义属性 data-src中，我们给图片所在的盒子设置一个默认的背景图片占位（要求这张图越小越好 1KB）在JS中，当监听到页面中的结构和数据都加载完成后（或者设置一个间隔时间），开始把data-src自定义属性中存储的真实图片地址.
复制链接

扫一扫