javascript判断图片是否加载完成的方法推荐

当我们需要在网页中加载图片时，在一些场景下，我们需要判断图片是否成功加载完成，以确保用户可以正常浏览网页。下面，我将详细讲解JavaScript判断图片是否加载完成的方法推荐。

方式一：使用Image对象

我们可以使用JavaScript中的 Image对象 来判断图片是否加载完成， Image对象 会创建一个表示图片的 DOM 对象，用来获取图片的相关信息。

下面是使用 Image对象 的示例代码：

function loadImg(url, success, error) {
  const img = new Image();
  img.src = url;
  img.onload = function() {
    success && success(img);
  };
  img.onerror = function(e) {
    error && error(e);
  };
}

• loadImg 函数接收三个参数分别为：图片的 URL 地址，加载成功后执行的 success 回调函数，加载失败后执行的 error 回调函数。
• img 对象的 onload 事件表示图片加载成功后执行的回调函数。
• img 对象的 onerror 事件表示图片加载失败后执行的回调函数。

下面是一个完整的调用示例：

loadImg(
  'https://picsum.photos/200',
  function(img) {
    console.log('图片加载成功');
    document.body.appendChild(img);
  },
  function(e) {
    console.log('图片加载失败');
  }
);

方式二：通过判断 complete 属性

我们还可以通过判断图片的 complete 属性来判断是否加载完成。图片对象的 complete 会返回“true”，当图片完全加载成功后。在 onload 或 onerror 回调函数中，我们可以判断 img.complete 属性来决定图片是否已经加载完成。

示例如下：

const img = new Image();
img.src = "https://picsum.photos/200";
img.onload = function() {
  if (img.complete) {
    console.log('图片加载完成');
  }
};
img.onerror = function(e) {
  console.log('图片加载失败');
}

当图片加载完成时，控制台将输出 图片加载完成 字样。

综上所述，以上两种方式都可以判断图片是否已经加载完成，建议根据自己的实际情况选择使用。

希望这篇攻略能帮助到你！