Javascript实现图片延迟加载

最新推荐文章于 2024-10-26 20:57:37 发布

VillanelleS

最新推荐文章于 2024-10-26 20:57:37 发布

阅读量978

点赞数 12

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_34306228/article/details/136553179

版权

前端同时被 2 个专栏收录

97 篇文章 3 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

Javascript实现图片延迟加载

图片延迟加载
- 图片懒加载优点
- 实现思路

图片延迟加载

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

图片懒加载优点

减少资源的加载，页面启动只加载首屏的图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多而阻塞 js 的加载，影响整个网站的启动。
能提升用户的体验，不妨设想下，用户打开页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长这就严重影响用户体验。

实现思路

通过监听时间触发，开启懒加载的开关
拿到所有图片列表，进行遍历
实时观测判断图片是否在可见区域内
通过一个栈来维护已经加载过的数据，防止重新加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 300px;margin: 0 auto;background-color:#222 ">
    <img class="lazy" src="./img/loading.gif" data-src="./img/1.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/2.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/3.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/1.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/2.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/3.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/1.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/2.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/3.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/1.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/2.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/3.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/1.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/2.webp" alt="" width="300" height="300">
    <img class="lazy" src="./img/loading.gif" data-src="./img/3.webp" alt="" width="300" height="300">
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 加载需要懒加载的图片
        let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
        let active = false;
        // 懒加载主函数
        const lazyload = function () {
            if (active === false) {
                active = true;
                setTimeout(function () {
                    lazyImages.forEach(lazyImage => {
                        // 判断图片是否可见
                        // 1. 做纵向的可见判断
                        if (
                            (
                                lazyImage.getBoundingClientRect().top <= window.innerHeight
                                && lazyImage.getBoundingClientRect().bottom >= 0
                            )
                            && getComputedStyle(lazyImage).display !== "none"
                        ) {
                            // 2. 图片url给到src
                            lazyImage.src = lazyImage.dataset.src;
                            // 3. 防止图片重复加载
                            lazyImage.classList.remove("lazy");
                            lazyImages = lazyImages.filter(image => {
                                return image !== lazyImage;
                            })
                        }
                    })
                    active = false;
                }, 200)
            }
        }
        // 初始化
        lazyload();
        // 滚动页面时
        document.addEventListener("scroll", lazyload);
        // 页面窗口改变 / 视窗大小改变时
        window.addEventListener("resize", lazyload);
        // 横纵方向改变时
        window.addEventListener("orientationchange", lazyload);
    })
</script>
</body>
</html>

请添加图片描述