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上原讨论贴