不少网站都会在网页埋入延迟载入的 JavaScript 程式码,以便降低首次载入的图片数量,加快网页首次呈现时间。Google Chrome 已预定在 75 版本原生支援这项功能并自动启动,包含 lazy image loading 和 lazy iframe loading。
网页结构越来越复杂,需要载入的物件也越来越多,该如何降低首次连入网页的延迟,对于使用者体验影响不小。目前跨网页浏览器的做法为埋入一小段 JavaScript 程式码,延后载入显示视区以外的物件,等到使用者滑动页面,接近视区时才会向服务器发出请求并下载,此种做法可有效降低首次进入网页的载入时间。
▲ lazy loading 不仅让网页显示时间缩短,也可以减少一开始的资料传输量。
Google Chrome 网页浏览器将从 75 版本号开始,原生支援 、
loading="lazy" 就如同现在的处理方式,当使用者卷动网页至接近视区时才会载入;loading="eager" 则是要求浏览器立即下载载入;loading="auto" 是交由网页浏览器自行决定载入时机点。由于 Google Chrome 预计是第一个导入原生 lazy loading 的网页浏览器,若是网页开发者欲达成跨浏览器相容性,则必须额外加入判断语法 if (‘loading’ in HTMLImageElement.prototype),在 else{} 段落填入原本用以 lazy loading 的 JavaScript。
▲ Google Chome 桌面版 73 版已加入 lazy image loading 和 lazy iframe loading 实验性功能,于网址列键入 chrome://flags 即可找到。
lazy loading 还能降低刚开始载入网页的流量,因此 Google Chrome 这项功能一开始其实是从 Android 版试验,如今桌面版也放在 chrome://flags 实验功能选单中,使用者可自行选择是否先行开启该功能。另外 Mozilla Firefox 浏览器目前仅支援新分页内容延迟载入,当使用者确实点击新分页使其显示在最上层,才会开始载入内容,至于是否原生支援图片或 iframe 延迟载入,目前并未有任何风声传出。
- Intent to Ship: Lazily load below-the-fold images and iframes
- Native image lazy-loading for the web!
(本文由 T客邦 授权转载;首图来源:shutterstock)