使用IntersectionObserver让html滚动到可见区域图片懒加载

最新推荐文章于 2024-09-05 10:28:36 发布
最新推荐文章于 2024-09-05 10:28:36 发布
阅读量188 收藏
点赞数
分类专栏： IT js html 文章标签： 使用IntersectionObserver让html滚动到可见区域图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43209114/article/details/103312209
版权
IT 同时被 3 个专栏收录
83 篇文章 2 订阅
订阅专栏
js
46 篇文章 0 订阅
订阅专栏
html
41 篇文章 1 订阅
订阅专栏
本文介绍了一种使用IntersectionObserver API实现的图片懒加载技术，通过监听DOM元素的可见性来动态加载图片，有效提升网页加载速度和用户体验。文章详细展示了如何通过JavaScript代码实现这一功能，并提供了完整的HTML和CSS样式代码。
摘要由CSDN通过智能技术生成 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>使用IntersectionObserver实现懒加载</title>
 
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none;
        }
        .list {
            width: 800px;
            margin: 0 auto;
        }
        .list ul {
            width: 100%;
            overflow: hidden;
        }
        .list ul li {
            float: left;
            width: 185px;
            height: 400px;
            margin-bottom: 10px;
            margin-left: 10px;
            background-color: #ccc;
            overflow: hidden;
            text-align: center;
            line-height: 400px;
            color: red;
            font-size: 24px;
        }
 
    </style>
</head>
<body>
 
<div class="list">
    <ul>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
    </ul>
</div>
 
</body>
<!--  -->
<script type="text/javascript">
    //获取dom
    function filterDom(selector) {
        //
        return Array.from(document.querySelectorAll(selector));
    }
    //事件观察者
    var observer = new IntersectionObserver(observerCall,{
        root: null,
        rootMargin : '0px 0px 20px 0px',
        threshold:[0, 1]
    });
 
    function observerCall(changes) {
        changes.forEach(function(change) {
            setTimeout(function(){
                if(change.intersectionRatio > 0){
                    var container = change.target;
                    var content = container.querySelector('template').content;
                    container.appendChild(content);
                    container.querySelector('.loading').style.display = 'none';
                    observer.unobserve(container);
                }
 
            }, 100);
        });
    }
    //过滤元素
    filterDom('.lazy-loaded').forEach(function (item) {
        observer.observe(item);
    });
</script>
</html>
QSWQSWQSWQSWQSW
关注
专栏目录
IntersectionObserver API实现图片懒加载、无限滚动
llllllhy_的博客
05-17 1552
可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"该方法不需要接收参数，返回所有被观察的对象，返回值是一个数组。// 当loding区的dom元素为可视化时，调用加载函数。目标元素的可见性发生变化时，就会调用观察器的回调函数。// 获取展示区 和 loding区的dom元素。// 获取内容区 和 loding区的dom元素。// 想要延迟，可以添加定时器，延迟渲染出数据。
IntersectionObserver实现图片懒加载的示例
11-29
图片懒加载是一种优化网页性能的技术，它通过延迟加载非可视区域的图片，直到用户滚动到它们将要进入视口时才开始加载。这种方式可以显著减少页面初始加载时间，提高用户体验，特别是对于拥有大量图片的页面。 ...
Html5 intersectionObserver
weixin_44240581的博客
07-22 258
懒加载 observeVisible = () => { /** * @param {function} callback - 目标元素可见性发生变化时调用，一般会触发两次，目标刚进入视口，目标完全离开视口 @param {array} entries - IntersectionObserverEntry对象数组， e.g. 同时有两个被观察对象的可见性发生变化，entries数组就会有两个成员
IntersectionObserver：详解无限滚动加载数据利器
最新发布
zhudapeng929的博客
09-05 1006
是一种现代 Web API，它允许开发者异步观察一个目标元素与其祖先元素或视口（viewport）交叉状态的变化。这对于实现图片懒加载或无限滚动功能非常有用。传统的实现方法是，在监听到scroll事件后，调用目标元素（绿色方块）的方法，获取它相对于视口左上角的坐标，然后判断是否在视口内。然而，这种方法的缺点在于由于scroll事件频繁触发，计算量较大，容易导致性能问题。而现在就可以使用这个api实现。具体实现见下文。entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个。
IntersectionObserver实现滚动加载
lqiqil的博客
10-20 1149
实际上，因为 document.querySelector 如果元素不存在就会返回 null ，而当 element 传递给 sectionObserver.observe() 时，如果 element 是 null ，就会抛出上述异常发生 Failed to execute ‘observe’ on ‘IntersectionObserver’: parameter 1 is not of type ‘Element’ ，所以请确保 document.querySelector 选择的元素必须存在。
js实现无限滚动加载数据
lbking666666的专栏
07-16 1164
entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。
IntersectionObserver与无限滚动加载
pscool的博客
04-12 901
Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时 (或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。构造函数的返回值是一个观察器实例。无论您是使用视口还是其他元素作为根，API 都以相同的方式工作，只要目标元素的可见性发生变化，就会执行您提供的回调函数，以便它与所需的交叉点交叉。它可以设置以下属性。
快速实现JS图片懒加载(可视区域加载)示例代码
10-20
JavaScript 图片懒加载（也称为可视区域加载）是一种优化网页性能的技术，主要目的是提升网页加载速度，改善用户体验，减轻服务器压力，并对SEO产生积极影响。它通过只加载用户当前可视区域内的图片，而不是一次性...
基于vue的懒加载插件实现图片或者其他资源进入可视区域后加载
08-12
除了`vue-lazyload`，还有其他类似的Vue懒加载插件，如`vue-virtual-scroller`，它不仅支持图片懒加载，还提供了虚拟滚动功能，进一步提高了性能。选择适合项目的懒加载解决方案，能够显著提升用户体验，降低服务器...
JS实现图片懒加载(lazyload)过程详解
10-15
图片懒加载(lazyload)是一种优化网页加载性能的技术，它主要针对页面中大量图片的场景。在不使用懒加载的情况下，所有图片会在页面加载时一次性加载，这可能导致页面加载速度变慢，尤其对于网络环境较差的用户，可能...
IntersectionObserver + Custom Elements 实现图片懒加载(滚动加载)/点击重试
weixin_33755649的博客
04-19 175
前言 在我们实际业务开发过程中，经常需要用到图片懒加载，也就是滚动加载。其功能就是，如果图片在可视区域，则触发加载逻辑。 传统实现方式 我们传统的实现方式，则是通过监听scroll事件，通过计算元素的(height、width、offset)等，判断该元素是否在可视区域，然后出发加载动作。 通过这种实现方式有很多库或者demo代码，这就不重复多说了。 但是这种方式的弊端也很多，由于滚动过程中，会触...
IntersectionObserver：前端性能优化的新利器
LuckyWinty的博客
01-31 224
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群IntersectionObserver：前端性能优化的新利器在当今网页设计中，用户体验和性能优化变得越来越重要。本文将带你深入了解一种强大的前端技术。通过使用IntersectionObserver API，那些性能上的优化。IntersectionObserver 是什么？IntersectionObserver 是一种 JavaScr...
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
xxq_0217的博客
03-27 1898
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
懒加载、预加载IntersectionObserver和监听滚动
m0_47195133的博客
05-23 682
懒加载、预加载IntersectionObserver
前端渲染优化常用总结-滚动分页加载、虚拟列表、延迟加载IntersectionObserver
weixin_44667515的博客
06-17 1122
有时候数据量大，页面请求数量过多会造成不好的体验，比如接口响应时间慢、并发请求多，渲染慢等等。最近就遇到了类似的优化需求，主要是三种滚动分页加载、虚拟列表、延迟加载，在这里记录一下他们的使用场景。
【前端】IntersectionObserver 实现图片懒加载和无限滚动
九日的博客
07-04 1801
API 是现代浏览器提供的一种异步观察者，它可以监视一个元素与视口（或某个特定祖先元素）交叉状态的变化。图片懒加载无限滚动加载内容实现元素的延迟加载触发动画效果在 Vue 中，我们可以通过自定义指令来实现懒加载。});});} else {// 如果浏览器不支持 IntersectionObserver，需要提供一个降级方案});
html5 observer api,IntersectionObserver（相交观察器） API简介及在线实例
weixin_39622289的博客
06-16 383
有时候我们希望跟踪DOM中的元素何时进入屏幕视线可见区域，这样就可以延迟加载图像或其他数据(比如广告)。要实现这样的目的，一般的思路是我们可以通过挂接滚动事件或使用定时器并对该元素调用getboundingclientrect()，然后计算元素包围盒是否落在当前位置的窗口区域中来完成。然而，这种方法非常缓慢，因为每次调用getboundingclientrect()，都会强制浏览器重新布局整个页面...
前端开发攻略---模拟后端接口返回数据，教你三种方式实现滚动到底部加载更多数据
nibabaoo的博客
04-28 1304
多种方式实现滚动到底部加载更多数据
深度解析：网页图片懒加载的实现策略
"本文主要探讨了在项目中实现图片懒加载的不同方法，包括利用getBoundingClientRect API、offsetTop API、IntersectionObserver API以及使用vue-lazyload插件。这些技术旨在优化用户体验，减少服务器压力，提高页面...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值