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个行为特征:

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

与JavaScript有关的几个行为特征(先看与JS有关的实践部分):

  1. 判断浏览器是否支持原生loading,最好使用'loading' in XXX判断。
  2. 获取loading属性值可以直接img.loading;
  3. 原生loading不可写,例如HTMLImageElement.prototype.loading会报错Illegal invocation。
  4. 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

上一篇:JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式


下一篇:180719-Quick-Task 动态脚本支持框架之使用介绍篇