社区精选 | 用原生的 JavaScript Intersection Observer API 实现 Lazy Loading

业界 作者:SegmentFault 2022-07-21 12:15:41

今天为各位带来的是社区作者 前端小智 的文章,在这篇文章中他为大家介绍了 Intersection Observer API。


让我们一起来了解吧~



前一阵子在做一个项目的时候,因为每组数据都要先通过很庞大的计算,才把计算后的结果 Render 到页面上,但这样就导致如果单页查出来的数据超过大概 5 笔,就会需要等待一段有感的时间,才能看到结果出现在画面上。


后来为了解决这差劲用户体验,就使用到的标题上说到的 Lazy Loading 来处理。简单说就是,虽然要显示的数据量有 10 笔,但因为一个页面大概只能呈现 2 到 3 笔,那我就先计算那 2 到 3 笔数据然后显示就好,剩下的数据等使用者往下滚再继续显示,这样等待时间就不会太久。


然后身为一个前端工程师,再想到这个解法以后,当然就是上 Github 找一个简单又方便的组件来解决它

延伸阅读
  • Mind-Map国产纯前端思维导图神器

    Mind-Map是一个JS思维导图库,完全运行在前端。这意味着你不需要额外的后端支持,直接集成到自己的web项目里就能用。作者把它设计成两部分:• 思维导图核心• 一个简易的web操作界面整个库不依赖

  • Laravel框架惊现高危漏洞 攻击者可肆意植入恶意脚本

    Laravel 框架中出现了一个极为严重的安全漏洞(编号为 CVE-2024-13918)。攻击者能够借此在运行该流行 PHP 框架特定版本的网站上,随意执行 JavaScript 代码。这个漏洞是在

  • n8n兼具代码灵活性和可视化简单操作的开源神器

    n8n,一款兼具代码灵活性和可视化简单操作的开源神器,让这些事情分分钟搞定!它支持 400+ 应用和服务,内置 AI 能力,既能拖拽完成任务,也能用代码搞定复杂逻辑,还能自托管,掌控所有数据。什么是

关注公众号:拾黑(shiheibook)了解更多

赞助链接:

关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

公众号 关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接