在react项目中使用IntersectionObserver来进行多个图片数据的懒加载

最新推荐文章于 2024-08-12 08:28:06 发布
最新推荐文章于 2024-08-12 08:28:06 发布
阅读量687 收藏 10
点赞数 9
文章标签： javascript reactjs react.js html5 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55857195/article/details/135280623
版权

这是代码部分为三部分图片里面有代码说明

 

这个我展示图片：此时可以看到在加载第一章图片的时候第二张图片已经加载完成了，此时说明懒加载功能已经可以使用了

不断成长的小菜鸟
关注
IntersectionObserver实现图片懒加载（超详细！）
Deku_Ln的博客
12-07 3470
关于IntersectionObserver 官方上说明是提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根（root）。 具体的内容可以参考官网解释：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver 这里我们主要来用IntersectionObserve来实现图片的懒加载。 <!DOCTYPE html> <.
IntersectionObserver API实现图片懒加载、无限滚动
llllllhy_的博客
05-17 1481
可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"该方法不需要接收参数，返回所有被观察的对象，返回值是一个数组。// 当loding区的dom元素为可视化时，调用加载函数。目标元素的可见性发生变化时，就会调用观察器的回调函数。// 获取展示区 和 loding区的dom元素。// 获取内容区 和 loding区的dom元素。// 想要延迟，可以添加定时器，延迟渲染出数据。
【Intersection Observer 介绍】React 中使用 Intersection Observer 和 LazyLoad来实现无限滚动，分页和懒加载
WarrenLee的博客
05-25 2509
实现前需要了解这些 Intersection Observer API 根据MDN的文档，“Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。”。 通俗讲，就是一个能够监听元素是否到了当前视口的事件，一步到位 使用例子 对于实现一张图片的懒加载，我们可以采用ntersection Observer + dataSet。假如我们的电脑是1920*1080的话，现在有个图片，他距离顶部有1500px，我们希望在它在滚动到可视区
React Intersection Observer 使用教程
最新发布
gitblog_00328的博客
08-12 315
React Intersection Observer 使用教程 react-intersection-observerReact implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.项目地址:https://gitcode.com/gh...
script 标签上的defer和async的区别
陆小森_红齐飘飘的博客
09-19 713
test
react-intersection-observer：Intersection Observer API的React实现，以告诉您元素何时进入或离开视口
02-05
React交叉口观察者 对React实现来告诉您元素何时进入或离开视口。 同时包含一个 ， 和实现。 故事书演示： ： 产品特点 :fishing_pole: 挂钩或组件API-使用useInView ，监视元素比以往任何时候都更加容易 :high_voltage: 优化的性能-尽可能重用交叉口观察者实例 :gear_selector: 匹配本机API-使用直观 :test_tube: 准备测试-嘲笑路口观察器，以便通过轻松进行测试 :deciduous_tree: 可摇树-仅包括您使用的零件 :collision: 很小的束 安装 使用安装： yarn add react-intersection-observer 或NPM： npm install react-intersection-observer --
图片懒加载之React + Intersection Observer API - 交叉观察器实现懒加载
2202_75616310的博客
11-29 858
判断元素是否进入视口从而来实现懒加载，因为用到了scroll的监听事件，因此频繁触发、调用可能会造成性能问题。创建一个IntersectionObserver.observe对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；，因为判断元素是否可见的本质就是看目标元素是否与根元素或视口产生了交叉。对象被创建时，其被配置为监听根中一段给定比例的可见区域。
用IntersectionObserver实现图片懒加载
cvvvvvvvvvv的博客
12-08 470
懒加载的基本思路 当dom元素进入可视区域时，才去加载它 利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载 格式： var dom = dom元素 // 实例化一个观察者 // 它的参数1是一个回调：当被观察的目标进入视口/离开视口就会调用 var observer = new IntersectionObserver((entries)=>{ console.log(entries[0].isInte
react实现触底加载
weixin_68537886的博客
05-13 716
用到了 antd-mobile第三方库中的InfiniteScroll 无限滚动。
react-intersection-observer：交叉点的React组件API
02-05
今天带ReactIntersectionObserver来，您的React孩子会喜欢的！ React Intersection Observer是一个React组件，用作IntersectionObserver API的包装。 它是完全声明性的，并为您处理了所有必要的部分。 React Intersection Observer擅长： 重用实例：比较传递的选项 性能：明智地选择何时重新渲染以及何时重新观察 不受质疑：如何处理可见性更改完全由开发人员决定 直观：看起来像Native API 目录 入门 npm install --save @researchgate/react-inte
开发随笔：React使用IntersectionObserver实现无限下拉
qq_24724109的博客
03-02 5224
17. 无限下拉的例子 参考博文 1. 工具介绍 IntersectionObserver: 一个元素是否在视窗中可见， 通过该对象实现对于DOM元素的异步监听功能的实现。 基本使用方法： 创建一个IntersectionObserver的类函数，在类函数创建时，传入需要监听事件的回调处理函数 主要用用于当元素和视窗发生交互时候，调用回调函数 回调中的entities是所有监听对象组成的数组...
intersection-observer-react:一个简单的IntersectionObserver API包装器，可在React应用中使用
04-30
React IntersectionObserver 一个简单的 API包装器，可在react应用程序中使用它。 安装 纱 yarn add intersection-observer-react npm npm install intersection-observer-react 基本用法 查看范例 儿童的功能 import { IntersectionObserver , Observable } from 'intersection-observer-react' render ( ) { return ( < IntersectionObserver> < Observable> { isVisible => isVisible && "I Am Visible" } < / Observable >
react-scrollama:在React中使用IntersectionObserver进行轻量滚动
04-28
ReactScrollama React Scrollama是一个轻量级的界面，用于在React中进行滚动显示。 它改编自Russel Goldenbeg的 ，并且使用而不是滚动事件。 如图所示： 阵营Scrollama 滚动弹奏 比阿特丽斯·金（ Beatrice Jin） 毕业生之间的性别差异 学生停滞不前高Ja（Jason Kao） 演示版 看看在ReactNYC上展示的现场演示。 基本步骤触发器 侧面有粘性图形 安装 React Scrollama可以作为npm软件包安装： $ npm install react-scrollama 注意：从2.2.0版开始， IntersectionObserver polyfill已从构建中删除。 您必须自己包括它才能获得跨浏览器的支持。 检查此处以查看是否需要包含polyfill。 用法 Scrollam
react_lazyloading:Intersection Observer API，应对延迟加载
03-27
使用IntersectionObserver React延迟加载图像 目录 1.项目说明 对于当今的大多数网站，图像是网站性能的主要瓶颈。 该项目旨在通过仅在要在用户视口中显示图像时才加载图像来减少首次渲染时的页面加载时间。 以下是使此图像组件延迟加载的基本步骤： 最初不渲染任何图像源。 设置当图像与视口相交时的检测。 当我们检测到可见的图像时，渲染图像源。 2.安装说明 版本： 节点：14.15.1 Npm：6.14.8 React：17.0.1 从Github下载代码： git clone https://github.com/antoineratat/react_lazyloading.git 导航到项目目录。 cd react_intersection_observer 安装节点模块。 npm install 在开发模式下运行该应用程序。 打开在浏览器
图片懒加载
05-19
图片懒加载是一种优化网页性能的技术，它通过延迟加载非视口内的图片，直到用户滚动到它们将要出现在屏幕上的位置时才开始加载。这一策略在现代网页设计中被广泛采用，因为它可以显著减少页面初始化时的数据量，提高...
React图片懒加载
qq_41672008的博客
02-07 2899
React图片懒加载 话不多说了，创建一个LazyLoad.js的React组件，然后将下面的代码复制过去： import React from 'react' // import './lazyload.css' // threshold const threshold = [0.01] class LazyLoad extends React.Component{ construc...
图片懒加载以及数据懒加载
longfan_的博客
07-14 1078
图片懒加载以及数据懒加载
JS中的高级API 、React中使用IntersectionObserver（可用于滚动后固定及懒加载）
weixin_42662753的博客
05-26 2093
在React中使用IntersectionObserver API（可用于滚动后固定及懒加载）
react函数触底组件加载
qq_60976312的博客
08-30 1281
react函数触底组件加载
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值