加载页面时图片一直是流量的大头，过多的图片会严重影响页面的加载速度，针对图片的性能优化方法有诸如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 | ZDNetTwitter上原讨论贴