多种js图片预加载实现方式分享

下面就为大家详细讲解多种JS图片预加载实现方式。

1. 什么是图片预加载？

在网页加载中，如果直接使用img标签加载图片，等用户看到图片会出现白屏，影响用户体验，因此我们通常需要在网页中使用图片预加载，将图片提前加载好，等用户看到图片的时候就可以直接显示，这样可以提升用户体验。

2. 图片预加载实现方式

2.1 使用Image对象预加载图片

使用Image对象预加载图片的方式如下：

function preLoadImg(url){
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.src = url;
    img.onload = function() {
      resolve();
    }
    img.onerror = function() {
      reject();
    }
  });
}

preLoadImg("https://picsum.photos/200/300").then(() => {
  console.log("图片加载完成！");
}).catch(() => {
  console.log("图片加载失败！");
});

2.2 使用XMLHttpRequest对象和Blob对象预加载图片

使用XMLHttpRequest对象和Blob对象预加载图片的方式如下：

function preLoadImg(url) {
  return new Promise((resolve) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (this.status === 200) {
        var blob = this.response;
        var img = new Image();
        img.onload = function() {
          resolve();
        };
        img.src = window.URL.createObjectURL(blob);
      }
    };
    xhr.send();
  });
}

preLoadImg("https://picsum.photos/200/300").then(() => {
  console.log("图片加载完成！");
}).catch(() => {
  console.log("图片加载失败！");
});

3. 总结

通过以上两个示例，我们可以看到，实现图片预加载的方式有很多种，主要有使用Image对象和XMLHttpRequest对象和Blob对象。在实际使用中，我们需要根据实际场景选择最合适的方式来实现图片预加载，以提升用户体验。