浏览器图片懒加载,解决页面图片过多加载慢问题

最新推荐文章于 2024-05-30 17:38:42 发布

unoping

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量1k

点赞数 1

分类专栏： java-web 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Lee_0220/article/details/121011878

版权

java-web 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文介绍了如何通过JavaScript实现图片懒加载，以提升网页性能。在页面加载时，仅加载可视区域内的图片，当用户滚动时再加载后续图片。通过设置`data-src`属性存储真实图片地址，并在图片进入视口时替换`src`属性实现加载。这种方法可以显著减少首屏加载时间，提高用户体验。同时，建议为未加载的图片提供默认小图，以保持页面美观。

摘要由CSDN通过智能技术生成

背景

页面有巨多张图片, 可能每张都还挺大, 一次加载很慢, 期望只加载用户当前看到的图片(即浏览器可视区域)

实现思路

将图片的实际地址写在一个其他属性中, 判断图片偏移高度, 决定是否加载此图片。

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
    <style>
        img {
            /* width: 600px;
            height: 400px; */
            display: block;
        }
    </style>
</head>

<body>
    <div class="main">
        <p id="aa"></p>

        <img src="" alt="" data-src="img/img (1).png">
        <img src="" alt="" data-src="img/img (2).png">
        <img src="" alt="" data-src="img/img (3).png">
        <img src="" alt="" data-src="img/img (4).png">
        <img src="" alt="" data-src="img/img (5).png">
        <img src="" alt="" data-src="img/img (6).png">
        <img src="" alt="" data-src="img/img (7).png">
        <img src="" alt="" data-src="img/img (8).png">
        <img src="" alt="" data-src="img/img (9).png">
        <img src="" alt="" data-src="img/img (10).png">
    </div>
</body>

<script>
    window.onload = function () {
        // 可以将一些优先级高德操作放到这里, 优先图片实际加载
        let aa = document.getElementById('aa')
        aa.innerHTML = '<h1>页面加载完了...</h1>'

        // 开始时加载第一屏图片
        loadImg();
    }

    // 页面滚动时候监听
    window.addEventListener('scroll', () => {
        loadImg()
    })

    /**
     * 
     * 懒加载图片
     * 
     * */
    function loadImg() {
        // 获取所有的图片
        let imgs = document.querySelectorAll('img')
        // 当前窗口高度
        let winHeight = window.innerHeight
        // 已滚动的高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

        // 判断图片高度偏移量, 确定是否加载图片
        // 关于图片偏移量: 如果图片有设置大小, 则立刻可以计算出偏移量, 否则等前一张图片加载完成才会出现偏移量数据
        imgs.forEach(img => {
            if (winHeight + scrollTop > img.offsetTop) {
                // 替换真实地址给src
                img.src = img.dataset.src
            }
        })

    }
</script>

</html>

扩展

可以给<img/>标签一个默认的小图片, 保证页面美感

unoping

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浏览器图片懒加载,解决页面图片过多加载慢问题

背景页面有巨多张图片, 可能每张都还挺大, 一次加载很慢, 期望只加载用户当前看到的图片(即浏览器可视区域)实现思路将图片的实际地址写在一个其他属性中, 判断图片偏移高度, 决定是否加载此图片。代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录