图片加载的一些问题

图片预加载

在页面展示时，文字和图片需要同时展示（类似菜单图标与菜单文字），文字是通过接口从后端获取的。在文字获取后通过document.createDocumentFragment()创建文档片段，将需要展示的内容添加到文档碎片中，再将文档碎片添加到对应的容器中完成页面的渲染。

但是如果网络不佳，那么文字会先显示出来，然后图标在隔一段时间后突然出现（文字提前加载好，在将文档碎片添加到容器后，图片才开始加载），这种体验非常不好。这时就需要将图片提前加载好，也就是图片预加载。

实现原理

通过提前加载图片资源，可以使浏览器在需要显示这些图片时能够立即从缓存中获取，而不需要再进行网络请求，从而加快页面加载速度。图片预加载常用于轮播图、相册、滚动加载等场景，以确保用户能够流畅地浏览和使用页面中的图片内容。

实现方式

<img/> 标签

使用隐藏的<img/>标签将图片加载到内存中，以实现预加载的效果。

<img src="image.jpg" style="display: none;">

Image对象

使用JavaScript创建一个新的Image对象，并将要预加载的图片的URL设置为其src属性。通过监听Image对象的load事件，可以判断图片是否已经加载完成。

const image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  // 图片加载完成后的处理
};

CSS背景图预加载

使用CSS将图片作为背景图像加载到隐藏的元素中，以实现预加载。（与<img/>标签方法类似）

.preloaded-image {
  background-image: url('image.jpg');
  width: 0px;
  height: 0px;
}

注意：不要使用display:none隐藏，浏览器不会渲染display:none的元素

Promise风格加载图片

const loadImg = (url) => {
  return new Promise((res, rej) => {
    const img = new Image();
    img.src = url;
    img.onload = () => {
      res(img);
    };
    img.onerror = (error) => {
      rej(error);
    };
  });
};

图片转base64编码

在某些情况下同一张图片重复使用，可能会加载多次导致性能低下，在第一次加载成功（load）回调中，将图片转为base64再使用就不会出现这种情况

const toBase64 = (img, width, heigth) => {
  const canvs = document.createElement('canvas');
  canvs.width = width;
  canvs.height = heigth;
  const context = canvs.getContext('2d');
  context.drawImage(img, 0, 0, width, heigth);
  const base64 = canvs.toDataURL();
  return base64;
};
// 第一次加载
let img = await loadImg('../imgs/bg1.png');
// 图片转base64编码
let imgBase64 = toBase64(img,60,60)
let newImg = new Image()
newImg.src = imgBase64

若图片太大，转base64编码的效率也会变低，需结合具体场景使用