实现图片懒加载

最新推荐文章于 2024-08-27 22:36:25 发布

起来改bug

最新推荐文章于 2024-08-27 22:36:25 发布

阅读量596

点赞数

分类专栏： JS 前端性能优化

本文链接： https://blog.csdn.net/q553866469/article/details/125054451

版权

懒加载 IntersectionObserver 图片优化滚动事件性能提升

关键词由CSDN通过智能技术生成

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端性能优化

3 篇文章 0 订阅

订阅专栏

图片懒加载就是当图片非常多，一屏无法完全显示的时候，我们就会把暂时看不到的图片，延时等滚轴滚动到时再进行加载，也算是一种性能优化，图片分开下载就是大幅度提高了首次加载页面的速度，例如就像一些电商网站的商品显示一样，下面我们就来实现一下图片的懒加载。

1.不使用懒加载

我们首先写出基本的html页面，代码如下如图所示：

<!DOCTYPE html>
    <head>
        <style>
            img{
                width: 40%;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>
        <div>他年若遂凌云志，敢笑黄巢不丈夫</div>


       <div><img src="./hkk.jpg" /></div>
       <div><img src="./lufei.jpg"/></div>
       <div><img src="./timg.jpg"/></div>
        <script>
           
        </script>
    </body>

显示如下所示：

2.监听图片高度实现懒加载

实现思路就是当图片距离浏览器顶部的高度小于浏览器视窗的高度时我们就加载出图片。

那我们首先就不应该把图片显示出来，解决方案就是使用data-*属性，这是标签的自定义属性，就保证了开始不会执行，方便我们替换src属性来显示图片，下面我们来写js代码：

const imags = document.querySelectorAll('img');

            window.addEventListener('scroll', () => {
                imags.forEach((img) => {
                const imgTop = img.getBoundingClientRect().top; // 获取每张图片到浏览器顶部的距离
                    if (imgTop < window.innerHeight) {
                        const imgSrc = img.getAttribute('data-src'); // 拿到自定义属性的值
                        img.setAttribute('src', imgSrc);
                        console.log('加载');
                    }
                })
            })

这样我们就实现了懒加载，但是会有一个问题，就是这种监听的方法会一直重复触发加载的动作，即使资源已经加载完毕了，如下图，所以我们选择下面的方式，也是推荐使用的方法。

3.IntersectionObserver

这是浏览器提供的构造函数，用于观察元素是否对于屏幕的可视区域可见，使用observe方法进行监听，unobserve方法取消监听，这样就是避免重复触发的问题：

const images = document.querySelectorAll('img');

            const callback = (enteries) => {
                enteries.forEach((e) => {
                    if (e.isIntersecting) { // 内置参数（boolean）是否能在浏览器中看到
                        const img = e.target;
                        const imgSrc = img.getAttribute('data-src');
                        img.setAttribute('src', imgSrc);
                        observe.unobserve(img);
                        console.log('加载');   
                    }
                })
            }

            const observe = new IntersectionObserver(callback);
            images.forEach((image) => {
                observe.observe(image);
            })