图片总是加载页面时的大部分流量。图片太多会严重影响页面的加载速度。图片的性能优化方式有base64、sprite等，延迟加载也是常用的方式之一。懒加载是指图片的延迟加载或延迟加载。首次加载页面时，只加载显示可见区域的图片。当页面滚动时，图片在资源加载之前进入可见区域。以前我们都是用js实现图片的懒加载，chrome75的到来将原生支持这个功能！事实上，在去年2月份，Chrome就首次提出了内置图片和iframe延迟加载机制，并在8月份的Canary版本中加入了实验性功能进行测试。近日，谷歌技术经理AddyOsmani宣布Chrome75将于今年5月底上市。默认情况下启用延迟加载。浏览器开启实验性功能体验测试此功能：下载最新版ChromeCanary。在chrome://flags中将Enablelazyimageloading和Enablelazyframeloading设置为Enabled。重新启动浏览器。loading属性Loading属性控制浏览器是否延迟加载屏幕外的图片和iframe：lazy：延迟加载资源。eager：立即加载资源。auto：浏览器自行决定是否延迟加载资源。默认效果（不设置该属性）与loading=auto的效果一致。需要注意的是，如果浏览器判断该资源适合懒加载，需要避免页面显示异常，影响用户体验。detection属性支持判断浏览器是否支持loading属性（有坑，文章后面会讲到）：if('loading'inHTMLImageElement.prototype){//浏览器原生支持`loading`属性。.}else{//通过js实现}浏览器兼容性需要用data-original（而不是src、srcset或）等属性名称标记资源地址，以避免在不支持此属性的浏览器中立即加载资源：如果浏览器支持loading属性，将data-original替换为src；如果没有，使用延迟加载方法：constimages=document.querySelectorAll("img.lazy");if('loading'inHTMLImageElement.prototype){images.forEach(img=>{img.src=img.dataset.原始的;});}else{constLazyLoad=awaitimport('/lazyload.min.js');letlazyLoadInstance=newLazyLoad({elements_selector:"img.lazy"});}imagesupporttype看到这个新特性后，我灵机一动，可以结合SVGinjector实现SVG的延迟加载：但是发现懒加载对SVG类型的文件不生效：个人不同意全面测试，下面是图片类型的支持级别：是否图片类型支持JPEG，支持GIF，不支持PNG，支持APNG，不支持SVG，不支持重复请求。需要注意的是，Chrome会在页面加载时请求需要延迟的前2048张图片。bytes，当用户即将滚动到图片时，Chrome会再次请求剩余的图片字节数（不影响图片的onloadevent)如果服务器支持rangerequest，会在前2048字节包含图片大小，浏览器会生成/显示一个相同大小的placeholder：各方态度Firefox：火狐工程师表示，Mozilla目前还没有任何计划实施Chrome的延迟加载方案。MicrosoftEdge：新的Edge浏览器使用Chromium75内核。下载并测试泄漏版本后，该版本在edge://flags/启用实验特性，支持延迟加载，也会重复请求资源，但HTMLImageElement.prototype没有loading属性，只有load属性，需要区分判断。Safari：一位WebKit开发人员提到Apple对此类功能很感兴趣：其他：在WICG上讨论了对延迟加载图像的本机支持。综上所述，在原有代码的基础上更新兼容的新功能并不复杂，但在启用新功能之前可能需要进一步思考，例如如果对所有图片设置loading="auto"，会不会有些延迟-加载图片影响用户？体验流畅度？浏览器对延迟加载图片的判断和决定会不会影响页面性能？对于延迟加载大量图片，浏览器会先请求所有延迟加载图片的前2048字节。在弱网环境下，会不会卡在这个阶段延迟首屏图片的加载？其他浏览器会遵循这个规范吗？emmm虽然问题很多，但是新功能还是可以带来新玩法的~比如以后支持SVG后，可以延迟加载。设置loading="eager"可以优先加载首屏重要的大图。对于广告（iframe或图片）统计可以更准确（在onload事件中设置延迟加载和计数）...参考AddyOsmani.com-Nativeimagelazy-loadingfortheweb！Firefox将支持新标签页图片延迟加载|ZDNetTwitterUehara讨论帖
