lazysizes

收录理由

lazysizes 会把图片、iframe 和第三方挂件推迟到真正进入视口时才加载，这样内容密集的页面就不必在首次绘制时承担全部资源的开销。你只需要给元素加上 lazyload 类名和 data-src 属性，脚本就会自动初始化，并持续监听滚动、CSS 动画、轮播、无限滚动或单页应用导航等引发的可见性变化，全程无需任何配置。在响应式图片方面，它能自动计算 sizes 属性，还允许你与 CSS 共享媒体查询，让 picture 和 srcset 的跨浏览器集成变得简单许多。资源优先级处理也很贴心：接近视口的资源只在网络空闲时预取，而不支持滚动的用户代理仍能拿到完整内容，搜索引擎因此可以正常索引。对于内容繁重、希望在不改动标记的前提下提升感知加载速度的站点或 Web 应用，这是一个成熟且实用的选择。