随着浏览器性能的提升，前端越来越重视用户体验，而影响用户体验最重要的指标之一就是首图的渲染速度屏幕。我们经常对样式、脚本、图片、音频、视频等资源进行处理，比如对样式和脚本进行压缩合并，将图片合并成sprite图片，将小图片转成base64，延迟加载等，以减少网络请求次数。现在大多数Web应用都包含大量的图片，延迟加载图片无疑会大大提升用户体验。以往我们可能会根据可见区域底部距离、窗口高度、滚动条距离，通过比较底部图片来判断是否加载新图片，或者在支持IntersectionObserverAPI的浏览器中使用交集观察器进行监控，而这就需要我们写脚本来判断和控制了。今天给大家带来的好消息是，Chrome75将原生支持图片延迟加载，并且支持img和iframe的延迟加载。你只需要将loading属性设置为lazy即可。loading属性Loading属性控制浏览浏览器是否延迟加载屏幕外的图片和iframe：lazy：延迟加载资源。eager：立即加载资源。auto：浏览器自行决定是否延迟加载资源。默认效果（不设置该属性）与loading=auto的效果一致。需要注意的是，如果浏览器判断该资源适合懒加载，需要避免页面显示异常，影响用户体验。loading属性支持img标签，不管img标签是否包含srcset属性并被picture标签包裹，iframe标签。示例代码：检测属性支持判断浏览器是否支持loading属性特性的出现必然不会立即兼容所有的浏览器，这就需要我们结合之前的data-src懒加载方式进行向后兼容，而不是使用src、srcset、来避免不支持原生懒加载功能的浏览器立即加载资源不支持原生延迟加载浏览器，我们使用lazySizes库来实现兼容性.forEach(img=>{img.src=img.dataset.src;});}else{//动态导入LazySizes库constlazySizesLib=awaitimport('/lazysizes.min.js');//初始化LazySizes(readsdata-src&class=lazyload)lazySizes.init();//lazySizes在全局范围内工作。}})();请求详细信息本机延迟加载在页面加载时获取前2KB的图像。如果服务器支持范围请求，前2KB可能包含图像尺寸，这允许我们生成/显示具有相同尺寸的占位符。当然，前2KB也可能包含图标等资产的完整图像。尝鲜在发布本文时，chrome的最新版本为73.0.3683.103，但我们可以通过启用浏览器的实验性功能来启用此功能。在chrome://flags页面搜索lazy，将Enablelazyimageloading和Enablelazyframeloading设置为Enabled，重启浏览器。请参阅AddyOsmani.com-Web的本机图像延迟加载！Twitter-AddyOsmani的原始帖子。欢迎关注公众号“前端新视界”获取前端技术前沿资讯，后台回复“1”送100本PDF前端电子书。
