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

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

浏览器启用实验性功能

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

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

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类型文件，延迟加载并没有生效：

经个人不完全测试，以下为图片类型的支持程度：

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

重复请求

需要注意的是，Chrome会在页面加载时请求需要延迟加载图片的前2048个字节，当用户即将滚动到图片时，Chrome会再次请求剩余的图片字节（不会影响该图片的onload事件）。

若服务器支持范围请求，则会在前2048个字节中包含图片尺寸，浏览器会生成/展示相同大小的占位：

各方态度

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

  

• 其他：在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上原讨论贴