图片预加载实践

上官晗
662 阅读3分钟

什么是图片预加载

所谓的图片预加载只不过是在你正式用到图片之前，已经对图片进行了加载。这样的话，第二次加载图片的时候就可以直接从缓存中读取，速度就会很快。

图片预加载的方式

link 标签实现

利用 link 标签中的 proload 去实现，这个属性允许你在HTML的 head中声明获取请求，制定页面很快就需要的资源，这些资源是你希望在页面周期的早期就开始加载的，早于浏览器的主要渲染机制启动。

<link rel="preload" href="https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg" as="image">

兼容性

兼容性也是相对比较好的， ie 是不支持的哈~

image.png

除此之外，这里不仅仅可以预加载图片，也可以预加载你想要的 js、css等等文件。具体可以参考MDN

css 实现

使用 css 本质上其实就是使用 css 中的 background 这个属性去加载图片

#preload { 
    background:url("https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg") no-repeat -9999px -9999px; 
}

js实现

利用 Image 或者是创建一个 img dom 去实现

const img = new Image()
img.src = "https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg"
img.onload = function(){
    console.log('图片加载完成')
}

实践对比

说明

我这里使用的是 vite 脚手架创建的一个项目，内容也很简单，就是一个页面中，有一张背景图，现在我们通过上面三种方式来对这张背景图做预加载。

具体代码

#app {
  background-image: url("https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg");
  background-size: 100%;
  background-repeat: no-repeat;
}

页面展示

image.png

加载分析

image.png

这里可以看到这个图片加载的时机是很慢的，在200多ms才去加载

link方案

具体代码

// html 文件中添加 
<link rel="preload" href="https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg" as="image">

加载分析

image.png 这里可以看到，这个时候图片加载的时机就很快，大概在30多ms就去加载了

CSS方案

具体代码

我们在 html 中插入这段代码，除了添加 css 还需要添加一个 dom 节点

// html 文件中添加
<style>
#preload{
    background:url("https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg") no-repeat -9999px -9999px;
}
<style>

<div #proload></div>

加载分析

image.png 大概是在200多ms执行，比正常快了一些，但也不是很多

JS方案

具体代码

这里其实可以分为两种，在于你代码的加载时机。由于用的是 vue 框架，要首先加载 vue 相关的代码，所以这里建议直接写在 html 中

 <script>
      const img = new Image();
      img.src =
        "https://images.pexels.com/photos/26100664/pexels-photo-26100664.jpeg";
      img.onload = function () {
        console.log("图片加载完成");
      };
    </script>

加载分析

image.png 也比正常快了一些，大概也是200ms左右

总结

使用 preload 是加载最快的，使用 css 以及 js 会提升一些，可以参照vite.svg 这个图标，使用 css 和 js 后，加载的比这个图标要快一些

但是使用 preload 和 css 是不可控的，使用 js 是可控的，知道什么时候可以加载完

其他

现在我们所有说的其实都是首屏加载图片，如果不是首屏加载图片呢？那其实我们就可以使用 js 去加载，或者是 link 标签的 prefetch 方式

avatar
文章
阅读
粉丝