首页
AI Coding
数据标注
NEW
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
无限滚动/滚动事件
订阅
YHui
更多收藏集
微信扫码分享
微信
新浪微博
QQ
6篇文章 · 0订阅
花三个小时,完全掌握分片渲染和虚拟列表~
大家好,我是小杜杜,有关高性能,大数据量的列表渲染的示例已经非常常见,可以说是前端必须要了解的功能点,今天我们一起手写一下,看看如何去更好的实现~
「前端进阶」高性能渲染十万条数据(虚拟列表)
在工作中,有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况,对于此,我们称这种列表叫做长列表。比如,在一些外汇交易系统中,前端会实时的展示用户的持仓情况(收益、亏损、手数等),此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中,提到了可…
90行代码,15个元素实现无限滚动
IntersectionObserver API 的用法,以及如何兼容。 如何在React Hook中实现无限滚动。 如何正确渲染多达10000个元素的列表。 无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。 当你使用滚动作为…
[译] 无尽滚动的复杂度 -- 来自 Google 大神的拆解
原文地址:https://developers.google.com/web/updates/2016/07/infinite-scroller 原文作者:Surma 译者:王芃 摘要: 重用你的 DOM 元素以及删除那些远离可视范围的元素。为延迟显示的元素使用占位符。这里是一个无尽滚…
谈谈IntersectionObserver懒加载
这是MDN上给的官方概念,不用去管它,我粘出来只是为了显得专业点嘛... 重点看这里监听目标元素与其祖先或视窗交叉状态的手段,其实就是观察一个元素是否在视窗可见。 可以看到,交叉了就是说明当前元素在视窗里,当前就是可见的了。 其实就是一个简单的构造函数。 以上代码会返回一个In…
IntersectionObserver 实现滚动加载
IntersectionObserver实现滚动加载如果你不喜欢繁琐onscroll,那么试一试IntersectionObserver吧下面有完整代码,逻辑写在注释里了话不多说上代码html/css