写文章

结合页面生命周期, 分享三种图片预加载技术

吐槽君 分类：javascript

大家好, 我是耗子

废话少说, 直接开始 ?

什么是图片预加载?

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

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

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

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

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

页面生命周期

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

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

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

  • DOMContentLoaded

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

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

  • load

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

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

  • beforeunload/unload

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

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

图片预加载

在 DOMContentLoaded 之前

也就是在 DOM 树还在解析的时候, 我们就需要预加载图片, 一般适用于用户初次进入页面就需要展示的关键图片, 比如官网Logo, 首页壁纸等。

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

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

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

这个方法不仅适用于图片, 还可以是 `css` 或其他类型的文件。
 
<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">
  <link rel="preload" href="image.png" as="image">
</head>

该方法可以使对应资源在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载, 从而达到不易阻塞初次渲染与提高性能的目的。

文档加载中预加载

也就是 DOMContentLoaded 的期间进行, 这个时候页面需要展示的图片本身就会请求, 所以我们针对的是那些初次渲染不显示, 在特点条件触发后显示的图片。

比如点击某个按钮弹出图片, 或者首页背景隔一段时间就会切换。

  • 使用 HTML+CSS 预加载

    html+css: img + display:none

    html+css: img + visibility:hidden

    以上两个方法本质一样, 在 DOMContentLoaded 的期间下载对应元素, 同样的对于背景图片, 我们同理。

    .preload { background: url(image.png) no-repeat -9999px -9999px; }

    但是 preload 类必须在某一元素上, 才会进行资源加载。

  • 利用 http 缓存

    上述方法的核心目的是为了缓存对应的图片文件, 当我们后续再次请求相应图片的时候, http 请求会优先访问缓存, 直接获取图片, 从而达到预加载的目的。

  • 局限

    不同图片就需要添加不同元素, 很浪费时间

    其次对于 Opera 浏览器, 仅仅当 display 不为 none 的时候才发起请求

文档加载完进行图片预加载

一般来说, 最常用的图片预加载方式, 就是在文档加载完毕使用 javascript 进行预资源请求。

使用场景也很广泛, 独到之处在于, 你可以再文档加载完成后加载, 或者是在触发某个条件再进行预加载。

比如用户登陆, 在登陆成功时, 对首页图片, 头像进行预加载。

  • 创建图片对象

    window.onload = () => {
    const img1 = new Image();
    img1.src = "image.png"
    img1.onload = () => console.log("add img into body");
}
//或
function loadImg(url) {
    const img1 = new Image();
    img1.src = url;
    img1.onload = () => console.log("add img into body");
    return img1;
}

    当设置 src 以后, 就会进行图片资源请求, 该方式可以嵌套在非常多的情况之中。

参考文章

如果我的文章让你有所收获, 请给个?! 谢谢

页面生命周期
javascript预加载

作者：掘金-结合页面生命周期, 分享三种图片预加载技术

回复

我来回复

  • 暂无回复内容