JavaScript实现非等高元素的虚拟滚动加载

于 2023-10-04 09:51:53 发布
阅读量167 收藏
点赞数
文章标签： javascript 开发语言 ecmascript JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/debug_bug142/article/details/133544673
版权
JavaScript 专栏收录该内容
306 篇文章 6 订阅 ¥59.90 ¥99.00
订阅专栏
本文介绍如何使用JavaScript和Intersection Observer API来优化长列表渲染性能，实现非等高元素的虚拟滚动加载。这种方法仅渲染可见区域的元素，提高页面加载速度和性能。文章详细讲解了创建HTML结构、配置Intersection Observer以及处理元素的加载和卸载过程。
摘要由CSDN通过智能技术生成

虚拟滚动加载是一种优化长列表渲染性能的技术，它可以在页面上只渲染可见区域内的元素，而不是一次性渲染所有的元素。这对于包含大量元素的列表或表格特别有用，可以提高页面的加载速度和性能。

在这篇文章中，我们将使用JavaScript实现一个非等高元素的虚拟滚动加载示例。我们将使用Intersection Observer API来检测元素是否可见，并根据可见区域内的元素动态加载和卸载元素。

首先，我们需要准备一些HTML结构和样式。我们将创建一个包含大量非等高元素的容器，并设置一个固定高度的可见区域容器。

<style>
  .container {
     
    height: 500px
了解本专栏 订阅专栏 解锁全文
碧海蓝天·
关注
专栏目录
订阅专栏
知识梳理——JavaScript
wytraining
03-14 1354
1. 说说前端中的事件流 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是从页面中接收事件的顺序. DOM2级事件流包括下面几个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener：addEventListener 是DOM2 级事件新增的指定事件处
【愚公系列】《AIGC辅助软件开发》011-AI辅助编写技术文档：技术文档
最新发布
时光隧道
07-24 1万+
在当今快速发展的技术环境中，技术文档的编写变得愈加重要。无论是软件开发、产品设计，还是系统架构，清晰、准确的技术文档不仅能帮助团队成员快速理解项目，还能为用户提供必要的使用指导。然而，编写高质量的技术文档常常是一项繁琐且耗时的任务。随着人工智能技术的不断进步，AI工具的辅助作用逐渐显现，特别是在技术文档的编写过程中。借助AI，开发者和技术作家可以更高效地生成、编辑和维护文档，从而专注于更高层次的创作和思考。
原生js实现模拟滚动条
10-24
本文给大家分享的是使用原生javascript实现模拟滚动条的方法及代码，效果非常棒，有需要的小伙伴可以参考下。
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1433
Document
html5 原生虚拟滚动,原生JavaScript实现的无缝滚动功能详解
weixin_28877107的博客
06-04 622
本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考，具体如下：无缝轮播(原生JavaScript)一：HTML部分：<>二、CSS部分* {margin: 0;padding: 0;}ul li {list-style: none;}.clearfix {zoom: 1;}.clearfix:after {display: block;clear: both...
原生JS+防抖，模拟滚动加载数据
MyBlog
01-05 679
思路： 滚动条头部距离顶部的距离加上，滚动套自身的高度等于整个页面的高度 滚动条高度（即可视窗口的高度） let clientHeight = document.documentElement.clientHeight 滚动条头部距离顶部的高度 let scrollTop = document.documentElement.scrollTop 整个页面的高度（包括溢出看不见的高度） let scrollHeight = document.documentElement.scrollHeight .
JavaScript实现虚拟滚动
weixin_53376443的博客
08-23 2011
1.创建一个容器元素，用来显示列表内容。2.绑定滚动事件，当滚动条滚动时，触发加载列表项的函数。在这种方式中，只有当前可见范围内的列表项会被生成和加载，减少了渲染和内存消耗。需要注意的是，这只是一种基本的实现方式，具体的实现可能会因为需求的不同而有所变化，例如可以添加缓存、虚拟化窗口等优化。
无限加载瀑布流
09-01
大量新增DOM元素可能导致页面渲染卡顿，因此应尽量减少DOM操作，例如使用虚拟滚动技术，只渲染视口内的元素。此外，对于屏幕阅读器和其他辅助技术的用户，我们需要提供明确的指示，告知他们内容正在加载或已经加载...
原生JS瀑布流布局，无限加载
09-01
1. 使用虚拟滚动：只渲染可视区域内的元素，减少内存消耗和渲染时间。 2. 使用Intersection Observer API：监听元素是否进入视口，实现更精确的加载时机，减轻滚动事件的性能压力。 3. 缓存已知高度：对于固定的元素...
原生JS实现无缝滚动
11-06
无缝滚动是经常用的一种展示效果，这里用JS实现无缝滚动的效果，这里是原型demo。
原生js模拟滚动条
u010234868的专栏
09-19 930
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 400px; margin: 50px auto; border:.
原生js实现模拟滚动条加完整注释，包你看得懂
qq_41988554的博客
09-06 199
实现效果： 代码加注释如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
代码拆解，不定高虚拟滚动（虚拟列表）
m0_64246444的博客
07-29 5103
代码拆解，不定高虚拟滚动（虚拟列表）；高性能渲染十万条数据；前端性能优化；长列表；dom元素过多；后端API一次返回10万条数据，前端如何处理呢
虚拟滚动（Virtual Scrolling）实现
qq_36437172的博客
11-01 2956
针对大数据列表一般不会一次性加载，会采用上拉加载或者分页的方式展示。如果 10W 条数据，列表对应着 10W 个 DOM 节点，性能方面体验可能会不太好，因此引入虚拟滚动来优化。虚拟滚动：要渲染完整列表对应的高度是通过 [虚拟计算] 的，并不是文档中存在对应的 DON 节点数。只要 [虚拟列表高度] > [列表可视区高度] 时，就会产生滚动条即可发生滚动操作。在滚动操作时，保证 [实际渲染的列表] 一直存在 [列表可视区] 中，并且动态切换需要渲染的列表数据。
Js无缝滚动效果，支持不固定行高
lyd518的专栏
07-07 652
Js无缝滚动#nli_con {    height: 100px;    width: 300px;    overflow: hidden;    border: 1px solid #999999;}div,dl,dt,dd {    margin: 0px;    pad
虚拟滚动探索与封装
weixin_50096821的博客
02-27 1623
什么是虚拟滚动？虚拟滚动就是通过js控制大列表中的dom创建与销毁，只创建可视区域dom非可视区域的dom不创建。这样在渲染大列表中的数据时，只创建少数的dom，提高性能。有了非定高虚拟滚动组件，不就是可以应对各种情况了，为什么还需要做定高虚拟滚动组件？在上面的封装思路中，我们能清晰知道非定高虚拟滚动组件是用假定值进行渲染的，在真实渲染过后才会弥补更新，而定高虚拟滚动所有东西都是确定的。所以定高虚拟滚动的优势就是比非定高虚拟滚动性能高，缺点就是只能应对每一条渲染数据是固定的情况。
虚拟滚动实现
aylog的博客
03-01 461
谁都可以看懂的--虚拟滚动技术实现
js写的虚拟滚动
四岁爱上了她的博客
01-09 399
js抄的虚拟滚动
JavaScript瀑布流布局与图片滚动加载实战
通过不断调整元素位置，并在满足条件时异步请求新的图片数据，就可以实现滚动加载的瀑布流效果。 总结来说，本文提供了关于JavaScript瀑布流布局的基本概念、实现原理和关键代码示例，帮助开发者理解和应用这种动态...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值