别在用scroll去做懒加载了,交叉观察器轻松搞定

news2025/4/5 14:50:58

Ⅰ、前言

  • 懒加载是网页中非常 常见的;
  • 为了减少系统的压力,对于一些电商系统出场频率非常高;
  • 那么大家一般用什么方式去实现 懒加载 呢 ?

在这里插入图片描述
① 通过 scroll 的形式:

通过 滚动scroll事件,然后去判断距离,当 距离到达一定范围,判断是否要加载资源;


② 通过 IntersectionObserver 的形式:

通过 元素与设备视窗或者其他指定元素发生交集的时候 => 最底部的元素滚动到视口时 ,判断是否要加载资源;

优势:

  • IntersectionObserver不像scroll事件触发那么频繁 , 对系统压力更小 ;
  • 不用计算距离,使用起来更加简单 ;

Ⅱ、概念与用法

  • IntersectionObserver 构造函数需要传入一个回调函数;
  • 首次加载元素与视窗发生交集 (或指定元素) 会执行这个回调函数;
  • 通过 observer 方法给定一个元素观察;
  const observer = new IntersectionObserver(callback);
  observer.observe(dom);

Ⅲ、用交叉观察器实现懒加载

  • 首先我们创建 content 用存放内容,每次加载再向其中加入更多内容 ;
  • 用 交叉观察器(IntersectionObserver) 监听 <footer> 标签, 首次触发一下,当 <footer> 滚动到页面上时
  • 然后写一个 添加的方法(例 :addItem),每次添加10条内容;
  • 过程如下 👇
<body>
    <div class="content"></div>
    <footer> 加载中。。。 </footer>
</body>
<script>
    const footer = document.getElementsByTagName('footer')[0]
    const observer = new IntersectionObserver((val) => {
        addItem();
    });
    observer.observe(footer);

    const content = document.getElementsByClassName('content')[0]
    let num = 0;
    function addItem() {
        for (let i = num; i < num+10; i++) {
            let node = document.createElement("div");
            node.innerText = `${i+1}`
            node.className = 'item'
            box.appendChild(content)
        }
        num = num + 10;
    }
</script>
  • 查看效果 👇

在这里插入图片描述

  • 再添加一点样式 ,完整例子 👇
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .item {
        height: 100px;
        box-sizing: border-box;
        border-bottom: 1px solid red;
        background: orange;
        width: 300px;
        text-align: center;
        line-height: 100px;
        margin: 0 auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    footer {
        width: 300px;
        margin: 0 auto;
        height: 50px;
        margin: 0 auto;
        background: aqua;
        text-align: center;
        line-height: 50px;
    }
</style>

<body>
    <div class="box"></div>
    <footer> 加载中。。。 </footer>
</body>
<script>
    const footer = document.getElementsByTagName('footer')[0]
    const observer = new IntersectionObserver((val) => {
        setTimeout(addItem, 300);
    });
    observer.observe(footer);

    const box = document.getElementsByClassName('box')[0]
    let num = 0;
    function addItem() {
        for (let i = num; i < num + 10; i++) {
            let node = document.createElement("div");
            node.innerText = `${i + 1}`
            node.className = 'item'
            box.appendChild(node)
        }
        num = num + 10;
    }
</script>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/345072.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浅析 Makefile

Makefile逻辑 Makefile就是将一系列的工作流串在一起自动执行&#xff0c;构成Makefile最基本的要素是目标、依赖、命令。也就是为了实现目标需要哪些依赖并执行什么样的命令。 target: dependences1 dependences2 ... command1 command2 ...其中&#xff0c;target表示要生…

Thinking--FastDom消除浏览器布局抖动

Thinking系列&#xff0c;旨在利用10分钟的时间传达一种可落地的编程思想。 对于大量操作 DOM 的场景&#xff0c;页面时常会出现卡顿现象&#xff0c;导致用户体验不佳。卡顿的原因是由于掉帧导致&#xff01;&#xff01; 掉帧 现在屏幕大部分的固定刷新频率为60Hz&#xf…

30个HTML+CSS前端开发案例(完结篇)

30个HTMLCSS前端开发案例&#xff08;完结篇&#xff09;flex弹性布局-今日头条首页热门视频栏代码实现效果flex弹性布局-微博热搜榜单代码实现效果grid网格布局-360图片展示代码实现效果综合实例-小米商城左侧二级菜单代码实现效果资源包flex弹性布局-今日头条首页热门视频栏 …

Pinia快速入门

Pinia学习1.做什么用的❓2.优势❓3. 介绍❓3.1、与vuex对比与 Vuex 3.x/4.x 的比较#4.实操使用&#x1f4aa;版本须知4.1创建项目4.2运行项目4.3使用pinia安装全局引入挂载使用stategettersactions示例代码分析1.做什么用的❓ 与vuex的作用一致&#xff0c;用于做网页存储的Pin…

【STC15单片机】模拟I2C操作AT24C02数据读取【更新中】

目录 I2C时序结构 I2C代码 AT24C02代码&#xff08;继承I2C底层代码&#xff09; PCF8591 PCB上线的长短可能影响数据传输的时间&#xff0c;写I2C时序可能就要加一点延时 I2C时序结构 起始条件&#xff1a;SCL高电平期间&#xff0c;SDA从高电平切换到低电平终止条件&…

什么蓝牙耳机好用性价比高?性价比最高的蓝牙耳机品牌排行

无线耳机迅速成为了电子产品中的佼佼者&#xff0c;无论是日常通勤、办公或是休闲、娱乐&#xff0c;几乎都能看到戴耳机听音乐的人&#xff0c;细心的朋友应该能够发现&#xff0c;蓝牙耳机在这几年有了很大的进步&#xff0c;下面我就分享几款当前性价比最高的蓝牙耳机。 TO…

T38,数的递归

描述 输入一棵节点数为 n 二叉树&#xff0c;判断该二叉树是否是平衡二叉树。 在这里&#xff0c;我们只需要考虑其平衡性&#xff0c;不需要考虑其是不是排序二叉树 平衡二叉树&#xff08;Balanced Binary Tree&#xff09;&#xff0c;具有以下性质&#xff1a;它是一棵空…

分账系统逻辑

一、说明 主体与业务关系方进行相关利益和支出的分配过程 使用场景&#xff1a; 在分销业务中&#xff0c;主营商户收到用户购买分销商品所支付的款项后&#xff0c;可以通过分账逻辑&#xff0c;与分销商进行佣金结算。在零售、餐饮等行业中&#xff0c;当销售人员完零售等…

小樽 C++指针—— (壹) 指针变量

(壹) 指针变量 一、指针的概念与定义 二、给指针变量p赋值 三、指针变量的的、-运算 四、无类型指针 五、多重指针 C (壹) 指针变量 小明想把从李华家借来的书——《CCF中学生计算机程序设计》还给李华&#xff0c;但李华不在家&#xff0c;于是把书放到书架第3层的最右边…

入门介绍对ChatGPT的应用程序接口API的访问<openai模块>

首先本人建议使用国内环境安装openai模块(这是我切换环境使用国外IP之后安装有问题的建议)pip install openai -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com安装好了之后&#xff0c;我们切换成科学上网&#xff0c;然后我们来到https://platform.openai…

十大开源测试工具和框架,一定有你需要的

目录 前言 Katalon Studio Selenium Appium JMeter SOAP UI Robot Framework Watir JUnit Robotium Citrus 总结 前言 免费的开源框架和工具由于其开源特性&#xff0c;现在逐渐成为自动化测试的首选解决方案。区别在于&#xff0c;你是喜欢使用类库编写一个全新的…

Ubuntu20.04安装redis与远程连接

一、安装Redis5.7 1、安装Redis apt-get install redis-server2、安装完成后&#xff0c;Redis服务器会自动启动。查看redis是否启动成功 service redis-server status #查看状态如下显示Active:active(running)状态&#xff1a;表示redis已在运行&#xff0c;启动成功。 …

Linux常用命令1

目录1、远程登陆服务器2、文件相关&#xff08;1&#xff09;文件和目录属性&#xff08;2&#xff09;创建目录mkdir&#xff08;3&#xff09;删除目录rmdir&#xff08;4&#xff09;创建文件touch&#xff08;5&#xff09;删除文件或目录rm&#xff08;6&#xff09;ls命令…

使用Python调用ChatGPT

import openai# Set up the OpenAI API clientopenai.api_key "你的KEY"# Set up the model and promptmodel_engine "ada"prompt input(请输入字符串&#xff1a;)# Generate a responsecompletion openai.Completion.create(enginemodel_engine,prom…

情人节使用AI TOOL来创建一个甜言蜜语的女伴

一、首先使用chatgpt生成一段情侣间的对话&#xff0c;需要反复几次&#xff0c;达到满意的程度&#xff0c;然后将女方的话归在一起。 这是一个情侣私下谈话的场景&#xff0c;女方表示对男朋友精心准备的情人节安排和礼物表示很满意 二、 打开网站&#xff1a;https://lexic…

Global mapper下载并使用在线数据---以下载ASTER GDEM为例

Global mapper 有个非常厉害的功能&#xff0c;就是下载在线资源&#xff0c;且不需要插件 当我们需要使用dem的时候&#xff0c;手头没有&#xff0c;需要去官网或者其他地方下载&#xff0c;就很麻烦 下载在线数据步骤—以下载ASTER DEM为例 打开global mapper后&#xff…

Unity 工具 之 SoftMask软遮罩 实现 UI 边缘渐变过渡的简单使用介绍

Unity 工具 之 SoftMask软遮罩 实现 UI 边缘渐变过渡的简单使用介绍 目录 Unity 工具 之 SoftMask软遮罩 实现 UI 边缘渐变过渡的简单使用介绍 一、简单介绍 二、Mask 实现的遮罩效果 三、Soft Mask 实现遮罩效果 四、 Soft Mask 的一些设置 五、插件下载 一、简单介绍 U…

Google Chrome开发者工具

文章目录简介debuggerDOMContentLoaded与load的区别最后我们来回答这个问题&#xff1a;我们为什么一再强调将css放在头部&#xff0c;将js文件放在尾部简介 Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具&#xff0c;可用来对网站进行迭代、调试和分析…

[数据结构笔记]常见排序算法

分类与性能 排序方法平均情况最好情况最坏情况辅助空间稳定性冒泡排序O(N^2)O(N)O(N^2)O(1)稳定简单选择排序O(N^2)O(N^2)O(N^2)O(1)不稳定直接插入排序O(N^2)O(N)O(N^2)O(1)稳定希尔排序O(N*logN) ~ O(N^2)O(N^1.3)O(N^2)O(1)不稳定堆排序O(N*logN)O(N*logN)O(N*logN)O(1)不稳…

英文视频字幕生成和翻译工具、AI拟声工具

文章目录一、Autosub-ahk&#xff1a;英文视频字幕生成工具二、VideoSrt&#xff1a;英文视频字幕生成和翻译工具三、SubtitleEdit&#xff1a;字幕编辑工具四、PotPlayer&#xff1a;视频播放器&#xff08;可导入字幕&#xff09;五、MockingBird&#xff1a;AI拟声工具一、A…