浅谈页面生命周期, 讲解三种图片预加载方式

大家好, 我是耗子

废话少说, 直接开始 🚀

什么是图片预加载?

我们今天的主菜是图片预加载, 先有我来简单介绍一下:

图片预加载就是将用户将要查看的图片, 在用户查看之前就提前加载好, 当用户查看的时候就可以跳过等待, 直接查看图片。

这一技术尤其针对大尺寸图片，减少用户等待图片资源下载的空白。

当然, 预加载技术也可以用作其他类型的数据

在我们的主菜上来之前, 我们需要先来点开胃小菜。

页面生命周期

所谓知己知彼, 百战不殆。

我们要需要优化图片加载就需要知道图片是在什么时候进行加载, 渲染的。

那这就不得不提到 HTML 加载的生命周期了:

• DOMContentLoaded

  浏览器已完全加载 HTML，并构建了 DOM 树，但像 和样式表之类的外部资源可能尚未加载完成。

  显然图片在这里仅仅发送资源请求, 并没有渲染。

• load

  浏览器不仅加载完成了 HTML，还加载完成了外部资源的下载。

  对! 就是这里了, 我们所有加入 HTML 文档的图片都会在这里被渲染。

• beforeunload/unload

  当用户正在离开页面/已经离开页面时。

针对不同的情况, 我们可以使用不同的方法进行预加载, 接下来上主菜。

图片预加载

在 DOMContentLoaded 之前

也就是在 DOM 树还在解析的时候, 我们就需要预加载图片, 一般适用于用户初次进入页面关键图片的渲染。

一般来说, 我们会将 javascript 代码放在在 load 事件执行, 也就是文档加载完成的时候。

因为 DOMContentLoaded 时文档还在加载, 运行javascript 会阻塞渲染, 所以这里显然不能使用 javascript 来进行。

这时候应该使用 link 与它的 rel 属性。

这个方法不仅适用于图片, 还可以是 `css` 或其他类型的文件。

<head