Chrome 75将原生支持图片的延迟加载!

kingwbs 2019-07-01

加载页面时图片一直是流量的大头,过多的图片会严重影响页面的加载速度,针对图片的性能优化方法有诸如base64、雪碧图等等,延迟加载也是其中一种普遍使用的方法。延迟加载即图片的懒加载或惰性加载,当页面初次加载时只加载显示可视区域的图片,页面滚动时,图片进入了可视区域才会进行资源的加载。
过去我们一直通过js来实现图片的延迟加载,而chrome75的到来将原生支持该功能!其实去年2月份Chrome就首次提出内置的图片和iframe延迟加载机制,并在8月的Canary版本中加入实验性功能对其进行了测试,最近Google技术经理Addy Osmani已经宣布今年5月底Chrome 75将会默认开启延迟加载的功能。

浏览器启用实验性功能

对该功能进行体验和测试需要:

  • 下载最新版本Chrome Canary
  • 在chrome://flags中将Enable lazy image loadingEnable lazy frame loading设置为Enabled。
  • 重启浏览器。

Chrome 75将原生支持图片的延迟加载!

loading属性

Loading属性控制浏览器是否延迟加载屏幕外的图像和iframe:

  • lazy:对资源进行延迟加载。
  • eager:立即加载资源。
  • auto:浏览器自行判断决定是否延迟加载资源。

默认效果(不设置该属性)和loading=auto的效果保持一致。需要注意的是,若浏览器决定该资源适合延迟加载,则需要避免页面不正常显示和影响用户体验。

检测属性支持

判断浏览器是否支持loading属性(有坑,文章后面会说):

if ('loading' in HTMLImageElement.prototype) { 
    // 浏览器原生支持 `loading` 属性..
} else {
    // 通过js实现
}

浏览器兼容

需要使用例如data-original这样的属性名标记资源地址(而不是src、srcset或<source>),以避免在不支持该属性的浏览器中立即加载资源:

<img loading="lazy" data-original="pic.png" class="lazy" alt="." />

若浏览器支持loading属性,则把data-original替换为src;若不支持则使用回原来延迟加载的方法:

const images = document.querySelectorAll("img.lazy");
if ('loading' in HTMLImageElement.prototype) {
    images.forEach(img => {
        img.src = img.dataset.original;
    });
} else {
    const LazyLoad = await import('/lazyload.min.js');
    let lazyLoadInstance = new LazyLoad({
        elements_selector: "img.lazy"
    });
}

图片支持类型

看到这个新功能后本来有个想法是,可以结合SVG注入器实现SVG的延迟加载:

<img loading='lazy' src="warning.svg" onload="SVGInject(this)" />

但发现对于SVG类型文件,延迟加载并没有生效:
Chrome 75将原生支持图片的延迟加载!
经个人不完全测试,以下为图片类型的支持程度:

图片类型是否支持
JPEG支持
GIF不支持
PNG支持
APNG不支持
SVG不支持

重复请求

需要注意的是,Chrome会在页面加载时请求需要延迟加载图片的前2048个字节,当用户即将滚动到图片时,Chrome会再次请求剩余的图片字节(不会影响该图片的onload事件)。
Chrome 75将原生支持图片的延迟加载!
若服务器支持范围请求,则会在前2048个字节中包含图片尺寸,浏览器会生成/展示相同大小的占位:
Chrome 75将原生支持图片的延迟加载!

各方态度

  • 火狐:Firefox的一位工程师表示,Mozilla目前还没有任何计划实现Chrome的延迟加载方案。
  • Microsoft Edge:新的Edge浏览器使用了Chromium 75内核,经下载泄露版本测试,该版本在edge://flags/中开启实验性功能,可支持延迟加载,且也会重复请求资源,但HTMLImageElement.prototype无loading属性,只有load属性,需进行区分判断处理。
    Chrome 75将原生支持图片的延迟加载!
  • Safari:一位WebKit开发者提到,Apple对这类功能很感兴趣:

    Chrome 75将原生支持图片的延迟加载!

  • 其他:在WICG上关于原生支持延迟加载图片的讨论。

总结

在原代码的基础上更新兼容新功能并不复杂,但在启用新功能前可能需要进一步的思考,比如若对所有图片设定loading="auto",某些被延迟加载的图片是否会影响用户体验的流畅性?浏览器对图片进行延迟加载的判断与决定是否会影响页面性能?对大量图片进行延迟加载,浏览器会先请求所有延迟加载图片的前2048个字节,在弱网环境下是否会卡在这个阶段反而耽误了首屏图片的加载?其他浏览器是否会遵循这种规范?

emmm虽然问题有点多但新功能还是可以带来新玩法~比如以后支持SVG后可对其进行延迟加载,设定loading="eager"可对首屏重要的大图优先进行加载,对于广告(iframe或图片)的数据统计可更加精准(设定延迟加载并在onload事件中统计)...

参考

AddyOsmani.com - Native image lazy-loading for the web!
Firefox will support image lazy loading for new tab page | ZDNet
Twitter上原讨论贴

相关推荐