原生Lazy-Loading登场，福利终于降临
网页中的图片无疑是用户体验中最重要的主题之一。所谓“一图胜千言”，贴切的用图不但能使用户更容易理解内容，并且能够在像百度这样的搜索引擎中展现出“吸睛”的缩略图，增加点击率（根据美库尔的实践统计，百度结果首页的缩略图比率高达7成，如果你的页面排名很高但却无法出图，那么获得的最终流量甚至会不如排名靠后的结果）。
[notification type=”alert-success” close=”false” ]
宜：通读并转发官网开发攻城狮；忌：百无禁忌。以往碰到技术类文章我都会理解读者弃我而去，可是今天请务必坚持。这必能有助于你提升上网速度。[/notification]
网页中图片元素的处理
然而大量的图片和过分大尺寸的图片又使得网页的读取速度大打折扣，给用户体验造成负面影响。于是，在通常的做法中，有两种普遍的处理方法。
其一是对不同的请求终端展现不同的图片尺寸。要么在服务器端进行“自适配设计”返回适合客户端浏览的必要尺寸图片，要么使用“自适应设计”，在客户端利用HTML5的新特性srcset\sizes或者是HTML5的新元素<picture>为不同尺寸、分辨率的屏幕罗列出各种图片让浏览器来决定使用哪个。
其二是使用Lazy-Load，对第一屏以下的图片进行延迟加载。当图片滚入用户视图后再进行加载，我们常见的微信公众号图片便都是使用这种方式。市面上有许多Lazy-Load的第三方库如lazysizes，极诣也曾经介绍过WordPress使用的插件a3 Lazy Load，你可以阅读原文体验一下这种方式。
Lazy-Load的做法一般是在<img>元素中添加data-src属性（你也可以使用别的属性名字，但建议你使用这个名称），然后对原本的src属性附上一个正在读取的gif小图片（有的网站连src属性都省了，这就变成一个不合规的<img>元素）。待到图片进入视野后你就看到gif显示正在读取，同时JavaScript会下载data-src里的真实图片地址，并对src进行替换。
它的缺点很明显，那就是src属性要么丢失，要么没有使用真实的图片地址。这本身对用户不影响，但是在SEO上特别是百度SEO上可真是要了命的。况且，一旦JavaScript被禁用，这图片就歇菜了。
原生Lazy Load
苍天啊！终于可以进入正题了。
2019年8月6日，谷歌在Web.Dev正式宣布原生Lazy-Load降临Chrome76！
https://web.dev/native-lazy-loading
从这个版本的Chrome开始，原生Lazy-Load已被搭载。说是被搭载而不是被启用时因为你需要手动开启这个仍然在试验阶段的特性。开启的方式很简单，在你的Chrome地址栏内输入chrome://flags/#enable-lazy-image-loading
这样你就可以大幅增强上网体验了，而且没错，你必须先开启这个功能。咦，那么你的访客会不会自己去手动开启呢？难道要你一个个去教吗？不不不，等该功能出了试验就会在新的Chrome中自动启用。至于是7X还是8X我们就不得而知了。
嗯，你可能还要问如果访客不用Chrome呢？万一用个斩断所有Cookie的iOS呢？笔者也不知道。一是不知道什么时候iOS会支持这个骚操作，二是不知道为什么有的人还要用iOS。但是我知道所有用Chomium内核的浏览器，包括新微软浏览器Edge都会支持这个特性，别忘了还有新版的安卓。而且有意思的是，有“好事者”竟然去Firefox报了一个Bug！说是你咋不支持这个捏？
鉴于中国广大网民还多在6X的版本上要普及这个功能至少还需要一两年。但是我们至少可以大胆期待这个能够显著增强网页浏览效果的特性了。
题外话，在笔者码这篇文章的时候BugZilla竟然挂了！
使用原生Lazy Load
我们说了半天还没有介绍原生Lazy Load的使用方法。要说使用方法实在太过于简单，只要你会一丁点HTML基础就行。你只要在你想要进行Lazy Load的图片标签<img>中添加属性loading=”lazy”即可。如：
<img src=”cat.jpg” loading=”lazy” width=”400″ height=”300″ alt=”King of Internet”>
惊不惊喜，意不意外？！谷歌还提供了一个demo让你体验一把全裸诱惑，前提是你必须启用Lazy Load（我刚教过你是不是）。
当我们改造网站后就不再需要使用JavaScript库来实现Lazy Load了。但是有几点你还是需要注意一下，别怪极诣未提醒：
- 当然是不支持的浏览器或者未开启该特性的浏览器不能享受此特性。
- 如果你需要Loading图片的gif效果的话，原生Lazy Load尚未支持。
- 打印页面的时候，还未被读取的图片不能被打印，Chrome团队正在修复。
Lazy Load进入原生时代之后我们就不必依靠JavaScript来实现该功能了。百度等其他对JavaScript支持尚不充分的搜索引擎也可以更好地发现网页中包含的图片，这才是本文的重点。
如果浏览器尚未支持?
Web.Dev的谷歌官方对不支持的浏览器给出了建议。
利用HTMLImageElement.prototype属性可以知道当前浏览器是否支持，如若支持则将data-src中内容赋给src，若不支持，那么按照原来的JavaScript方法进行。
上述方案对我们解决JavaScript执行能力很差的爬虫蜘蛛并没有什么卵用，存粹多此一举，且不伦不类。笔者在此就不展开了。
iFrame的Lazy Load
文章的最后我们讲一下iFrame的Lazy Load。注意下图中的edge://flags/
这个特性和上面的img的Lazy Load并不是捆绑在一起的，需要分别开启，用法却一样。只需要在<iframe>元素中增加属性loading=”lazy”即可。不过，有许多iframe被用来做跟踪pixel。Chrome自己会判断，条件是：
- 如果iframe长宽均小于等于4px
- 如果iframe不可见，应用了CSS display: none或者visibility: hidden
- 如果iframe所在坐标轴x或y为负
那么iframe大多情况下不会被Lazy Load，即便被标了lazy。
以上就是本篇的全部内容。快去你的浏览器中试一下飞速上网吧！
