001_Chrome 76支持原生HTML 图片懒加载Lazy loading

Table Of Content

什么是懒加载？

语法参数及使用方式?

有哪些特点？

与js有关的实践

什么是懒加载？

技术背景

Web应用需要经常向后台服务器请求资源（通过查询数据库，是非常耗时耗资源的），但是请求量过大，会导致服务端负载过大，响应慢，就容易造成前端的应用以及页面卡顿。

为了解决这种问题，现今浏览器普遍使用了缓存技术，但是如果数据量过大，就不合适了，因为内存容量有限，把过多的数据放在内存中，会影响电脑性能。

以此为背景，懒加载技术萌生。

定义

懒加载(Load On Demand, 按需加载)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

懒加载，又叫做按需加载，就是字面上的意思，懒加载的出现，主要为了防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

语法参数及使用方式?

如果你想要让一张图片在靠近浏览器视窗的时候才加载，下面代码就可以了：

<img src="./example.jpg" loading="lazy" alt="zhangxinxu">

无需任何其他的JavaScript代码就可以实现懒加载功能。

HTML loading属性支持的值除了lazy还有下面这几个：

lazy

图片或框架懒加载，也就是元素资源快要被看到的时候加载。

eager

图片或框架无视一切进行加载。

auto

默认值。图片或框架基于浏览器自己的策略进行加载。

如果HTMLImageElement或者HTMLIFrameElement元素没有显式地设置loading属性或者loading属性的值不合法，则都被当作auto处理。

有哪些特点？

总结，原生懒加载的5个行为特征：

Lazy loading加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系。
Lazy loading加载数量与网速有关，网速越慢，加载数量越多，但并不是线性关系。
Lazy loading加载没有缓冲，滚动即会触发新的图片资源加载。
Lazy loading加载在窗口resize尺寸变化时候也会触发，例如屏幕高度从小变大的时候。
Lazy loading加载也有可能会先加载后面的图片资源，例如页面加载时滚动高度很高的时候。

与JavaScript有关的几个行为特征（先看与JS有关的实践部分）：

判断浏览器是否支持原生loading，最好使用'loading' in XXX判断。
获取loading属性值可以直接img.loading；
原生loading不可写，例如HTMLImageElement.prototype.loading会报错Illegal invocation。
Polyfill就是场梦，只能等浏览器支持。

与JS有关的实践

1. 如何判断当前浏览器是否支持loading=”lazy”？

下面三种方法都可以：

var isSupportLoading = 'loading' in document.createElement('img');

或者：

var isSupportLoading = 'loading' in new Image();

或者：

var isSupportLoading = 'loading' in HTMLImageElement.prototype;

2. 如何获取loading属性值

假设<img>元素的DOM变量名是img，则该图片元素的loading属性值直接下面语法就可以获取了：

var attrLoading = img.loading;

参考：Link