img onload

发布于 3/10/2019, 10:46:14 AM

img load 事件 {#img-load-event}

最近有一个需求，需要用到 canvas drawImage。看了一下 MDN 上的 canvas 教程，刚开始写出来是这样的：

var img = new Image();
img.src = `${prefix}avatar.png`;
img.onload = function () {
  ctx.drawImage(x, y, width, height);
};

这样写发现有时候能把图片画上去，有时候不能。查看 load 事件的定义：

The load event is fired when a resource and its dependent resources have finished loading.

load 事件会在资源以及它所依赖的资源完成加载时候触发。这里会不会出现图片很快就加载完成（比如缓存中，从缓存中加载，也是会触发 load 事件的），而这个时候 onload 还没有添加监听器？所以要先添加监听器：

var img = new Image();
img.onload = function () {
  ctx.drawImage(x, y, width, height);
};
img.src = `${prefix}avatar.png`;

这样画一张图片是够了，但是如果要求要等好几张图片都加载完之后呢。这里有一个方法：

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();

const imgPromiseArr = [img1, img2, img3].map((img) => {
  return new Promise((resolve, reject) => {
    img.onload = function () {
      resolve();
    };
  });
});

await Promise.all(imgPromiseArr);
// now all image loaded

var img = new Image();
img.onload = function () {
  ctx.drawImage(x, y, width, height);
};
img.src = `${prefix}avatar.png`;

这样画一张图片是够了，但是如果要求要等好几张图片都加载完之后呢。这里有一个方法：

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();

const imgPromiseArr = [img1, img2, img3].map((img) => {
  return new Promise((resolve, reject) => {
    img.onload = function () {
      resolve();
    };
  });
});

await Promise.all(imgPromiseArr);
// now all image loaded

img onload

img load 事件 {#img-load-event}

参考 {#reference}