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

最新推荐文章于 2024-03-25 13:16:16 发布
最新推荐文章于 2024-03-25 13:16:16 发布
阅读量169 收藏
点赞数
分类专栏： 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 订阅
订阅专栏 
<!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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS实现图片懒加载(lazyload)过程详解
10-15
图片懒加载(lazyload)是一种优化网页加载性能的技术，它主要针对页面中大量图片的场景。在不使用懒加载的情况下，所有图片会在页面加载时一次性加载，这可能导致页面加载速度变慢，尤其对于网络环境较差的用户，可能...
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
最新发布
xxq_0217的博客
03-27 1288
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
IntersectionObserver API实现图片懒加载、无限滚动
llllllhy_的博客
05-17 1123
可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"该方法不需要接收参数，返回所有被观察的对象，返回值是一个数组。// 当loding区的dom元素为可视化时，调用加载函数。目标元素的可见性发生变化时，就会调用观察器的回调函数。// 获取展示区 和 loding区的dom元素。// 获取内容区 和 loding区的dom元素。// 想要延迟，可以添加定时器，延迟渲染出数据。
IntersectionObserver实现滚动加载
lqiqil的博客
10-20 1053
实际上，因为 document.querySelector 如果元素不存在就会返回 null ，而当 element 传递给 sectionObserver.observe() 时，如果 element 是 null ，就会抛出上述异常发生 Failed to execute ‘observe’ on ‘IntersectionObserver’: parameter 1 is not of type ‘Element’ ，所以请确保 document.querySelector 选择的元素必须存在。
Html5 intersectionObserver
weixin_44240581的博客
07-22 216
懒加载 observeVisible = () => { /** * @param {function} callback - 目标元素可见性发生变化时调用，一般会触发两次，目标刚进入视口，目标完全离开视口 @param {array} entries - IntersectionObserverEntry对象数组， e.g. 同时有两个被观察对象的可见性发生变化，entries数组就会有两个成员
IntersectionObserver深入详解及使用方法
nibabaoo的博客
03-25 1027
一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；对象被创建时，其被配置为监听根中一段给定比例的可见区域。对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个。（threshold）时，会执行指定的回调函数。开始监听一个目标元素。
简单的图片懒加载实现
11-29
图片懒加载是一种优化网页性能的技术，它通过延迟加载非可视区域内的图片，直到用户滚动页面使其进入可视区域时才开始加载。这种技术可以显著减少页面初始化时的数据传输量，提高页面加载速度，提升用户体验，特别是...
基于vue的懒加载插件实现图片或者其他资源进入可视区域后加载
08-12
除了`vue-lazyload`，还有其他类似的Vue懒加载插件，如`vue-virtual-scroller`，它不仅支持图片懒加载，还提供了虚拟滚动功能，进一步提高了性能。选择适合项目的懒加载解决方案，能够显著提升用户体验，降低服务器...
懒加载案例lazyload
08-27
在网页初次加载时，并不立即加载所有内容，而是只加载用户可视区域内的元素，当用户滚动页面到某一位置或者触发特定事件时，再加载其他内容。这样可以显著减少初始加载时间，提高网页的响应速度，特别是对于内容丰富...
js代码-图片懒加载
07-16
图片懒加载是一种优化策略，它延迟非可视区域图片的加载，直到用户滚动到它们所在的位置。这样可以显著减少初始页面加载时间，提高页面的首屏渲染速度，同时节省用户的网络带宽。 ### 2. 原理 懒加载的基本思路是...
IntersectionObserver简单介绍及使用，监听元素是否在可视区域内
05-22 2005
IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。IntersectionObserver支持两个参数：callback是当被监听元素的可见性变化时，触发的回调函数options是一个配置参数，可选，有默认的属性值。
IntersectionObserver的使用
老电影故事的博客
11-08 579
是一个现代浏览器提供的 API，用于监听元素与其祖先元素或顶层文档视窗(viewport)交叉的情况，即元素是否进入或离开视窗。它通常用于实现懒加载图片、监听滚动事件、触发动画效果等场景，可以显著提高性能和用户体验。
html5 observer api,IntersectionObserver（相交观察器） API简介及在线实例
weixin_39622289的博客
06-16 334
有时候我们希望跟踪DOM中的元素何时进入屏幕视线可见区域，这样就可以延迟加载图像或其他数据(比如广告)。要实现这样的目的，一般的思路是我们可以通过挂接滚动事件或使用定时器并对该元素调用getboundingclientrect()，然后计算元素包围盒是否落在当前位置的窗口区域中来完成。然而，这种方法非常缓慢，因为每次调用getboundingclientrect()，都会强制浏览器重新布局整个页面...
IntersectionObserver与无限滚动加载
pscool的博客
04-12 799
Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时 (或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。构造函数的返回值是一个观察器实例。无论您是使用视口还是其他元素作为根，API 都以相同的方式工作，只要目标元素的可见性发生变化，就会执行您提供的回调函数，以便它与所需的交叉点交叉。它可以设置以下属性。
JS小知识，Intersection Observer API 使用指南
前端达人
02-16 3699
使用Intersection Observer API在JavaScript中实现懒加载，无限滚动等功能，而不需要使用复杂的逻辑或导致性能问题。Intersection Observer API 用于异步观察元素与浏览器视口的交集变化。它使得检测元素的可见性，或者两个元素的相对可见性变得容易，而不会使网站变得缓慢并降低用户体验。本文将介绍关于Intersection Observer的所有内容。I...
Html图片懒加载动画,Intersection Observer实现滚动到相应区域执行动画及图片懒加载...
weixin_35671171的博客
06-04 462
Intersection observer API提供了一种方法，可以异步观察目标元素与祖先元素或相对于浏览器视口(root)的交集变化。很多种情况下都需要用到元素交集变化的信息，例如：当页面滚动时，懒加载图片或其他内容。实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。为计算广告收益，检测其广告元素的曝光情况。根据用户是否已滚动到相应区域来灵活开始执行任务或动画。过去，交...
HTML5和Intersection Observer的响应式图像优化简介
cumi6497的博客
07-23 243
by Riccardo Canella 里卡多·卡内拉(Riccardo Canella) HTML5和Intersection Observer的响应式图像优化简介 (An intro to responsive image optimization with HTML5 and Intersection Observer) Images often account for most of ...
IntersectionObserver 实现无限滚动
weixin_53751894的博客
08-31 613
IntersectionObserver，H5无限滚动
懒加载、预加载IntersectionObserver和监听滚动
m0_47195133的博客
05-23 488
懒加载、预加载IntersectionObserver
IntersectionObserver图片懒加载代码
03-24
以下是IntersectionObserver图片懒加载的代码示例： HTML： ``` ``` JavaScript： ``` const lazyImages = document.querySelectorAll('.lazy'); const lazyLoad = target => { const io = new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值