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