Google 最近发布了 Google Chrome 74，可以通过一个实验性开关对图片和 iframe 开启原生延迟加载（代号 LazyLoad）特性。开启后，img 和 iframe 标签会有额外的 loading 属性用于配置相关资源的延迟加载行为。延迟加载不可见内容可以减少数据和内存消耗，同时加快首要内容的展示。
Chrome 74 现在支持对页面不可见区域的图片和 iframe 进行延迟加载，直到用户开始进入到指定的浏览距离。这个加载距离取决于网络速度等因素，内容通常是在刚好变成可见时完成加载。
网页设计者可以使用 img 和 iframe 标签的loading属性来控制和影响默认延迟加载行为：
lazy：表示这个元素适合延迟加载。
eager：表示这个元素不适合延迟加载，需要马上加载。
auto：让浏览器来决定是否需要延迟加载。当 loading 属性设置为 auto 时，相当于未设置该属性。
目前只有 Chrome 支持延迟加载特性。开发者如果需要跨平台支持该特性，需要依赖浏览器的功能检测，并使用额外的延迟加载库，例如lazySizes和vanilla-lazyload。vanilla-lazyload 库作者Andrea Verlicchi在一篇博文中介绍了混合延迟加载。Chrome 团队工程经理 Addy Osmani 提供了一个示例：
如果需要尝试进行延迟加载，可以进入 chrome://flags，开启允许 iframe 延迟加载（Enable lazy frame loading）和允许图片延迟加载（Enable lazy image loading）。这将会对标记了 loading="lazy"的图片和 iframe 开启延迟加载特性，同时那些标记了 loading="auto"或者没有任何 loading 属性的元素将适时进行延迟加载。
Google 已经提议将 img 和 iframe 的 loading 属性作为HTML标准的一部分。
原文链接：
Chrome 74 Natively Supports Lazy Loading
Java 避坑指南：Java 高手笔记代码篇
本迷你书包括 86 个业务开发中常见踩坑点。每一个知识点都相当的实用，是程序员业务开发中的必备避坑指南...
评论