js实现图片懒加载

最新推荐文章于 2024-04-07 10:27:51 发布

让代码飞1926

最新推荐文章于 2024-04-07 10:27:51 发布

阅读量343

点赞数

分类专栏： Javascript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_40596257/article/details/128162862

版权

Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

当我们打开一个网页的时候，有很多图片文件，浏览器会那这些图片都下载下来，去请求数据，等待加载的事件比较长，为了提高用户体验，所以我们想到了图片懒加载，就是当图片滚动到可视区域的时候，再让他去请求，可以更好的节省流量

实现起来也是很简单，用到了浏览器提供的观察者-IntersectionObserver来实现，首先获取到全部img标签，然后让他观察这些图片，当出现在可视区域的时候observer回调里面的isIntersecting就变为true，通过这个判断来把图片的自定义属性添加到src上面，最后取消监听，否则会重复触发

<body>
    <div class="box"></div>
    <div class="box"></div>
    <img data-src="../img/zjl.webp" alt="">
    <div class="box"></div>
    <img data-src="../img/zjbg.webp" alt="">
</body>
<script>
    let imgs = document.querySelectorAll('img')
    let observer = new IntersectionObserver((entries) => {
        entries.forEach(entrie=>{
            if (entrie.isIntersecting) {
                let img = entrie.target
                let data_src = img.getAttribute('data-src')
                img.setAttribute('src', data_src)
                observer.unobserve(img)
            }
        })
    })
    imgs.forEach(img => {
        observer.observe(img)
    });
</script>
<style>
    .box{
        height: 500px;
        border: 1px solid #ccc;
    }
</style>