据说你还在手写懒加载?

过去, 咱们对含有大量图片的网站进行优化无外乎要依靠JS逻辑或是相关插件来完成, 好比懒加载技术. 而如今(至少在不久的未来), Chrome 75版本将增长原生懒加载功能.

直接开始使用

固然, 你也能够如今就开始体验这一功能, 在浏览器的标签栏输入browser://flags/#enable-lazy-image-loading并进入页面, 找到enable-lazy-image-loading这一项打开它, 重启后便可使用.

标准之下

有关loading的使用, 我相信你想知道更多, 你可使用如下三个属性来定义浏览器加载行为:

• lazy: 使用懒加载, 当屏幕滚动到图片附近时
• eager: 当即加载图片
• auto: 由浏览器自行决定

有关懒加载的讨论, 你能够经过这个issue进一步探索.

开始使用新代码

也许你想把这一特征当即运用到你的项目中, 可是你别忘了至少目前为止他仍是实验性的功能, 因此须要作功能检测, 对不支持的浏览器进行兼容:

仅仅这样还不够, 为了避免使你的Image标签被不支持loading属性的浏览器当即加载出来, 你还须要把src属性替换为其它属性, 同时还得考虑浏览器不支持JS的状况, 好比像这样作:

抛弃非原生懒加载?

抛弃非原生懒加载? 答案在任何状况下都是否.

若是将来浏览器都支持懒加载, 而且标准较如今没有改变的话, 它只适用于一些简单的网页浏览场景, 好比像掘金这种文本和图片混排的页面.对于特殊场景下, 好比这位老哥的这篇文章里描绘的问题, 咱们仍是得须要根据需求, 书写大量原生JS逻辑.除非问题本质获得解决, 否者任何在体验上的优化, 都是优化一部分场景的性能, 而放弃另外一部分场景的性能(甚至负优化)

最后

文中代码图片是使用Carbon合成的, 掘金的代码高亮实在是... 么得办法~~

References

Native image lazy-loading for the web!

Lazyload images and iframes

图片和视频的懒加载

极致性能 – 图片渐进显示和懒加载