JavaScript判断图片是否已经加载完毕的方法汇总

关于JavaScript判断图片是否已经加载完毕的方法汇总，可以通过以下三种方法来实现：

1. Image对象的complete属性

可以通过创建 Image 对象来加载图片，使用其 complete 属性来判断图片是否加载完成。

const img = new Image();
img.src = 'https://example.com/image.jpg';
img.onload = function() {
  console.log('图片加载完成');
}
img.onerror = function() {
  console.log('图片加载失败');
}

需要注意的是，img.onload 和 img.onerror 回调函数的执行是异步的，即不保证在设置完回调函数后就立即执行，而是根据网络情况在适当时机异步执行。为了避免图片太小或者在本地可以瞬间读取完成，默认没有回调函数的图片是存在缓存的，需要在加载结束后再添加监听，所以可以为图片添加一个 onload 事件监听器，确保能够正确获取到图片加载完成的状态。

2. 利用DOM

还可以通过利用 DOM 元素的完整性来判断图片是否加载完成。首先，通过 document.createElement 创建一个 img 标签，并设置 src 属性，然后添加 onload 和 onerror 事件监听器判断图片的加载状态。

const img = document.createElement('img');
img.src = 'https://example.com/image.jpg';
img.onload = function() {
  console.log('图片加载完成');
}
img.onerror = function() {
  console.log('图片加载失败');
}

总结

两种方法都可以实现判断图片是否已经加载完成，其中第一种方法使用 Image 对象可以使修改大小以及维护各种异步情况更为简便，第二种方法通过DOM的方式能够让每个图片更加独立为单独的entity实体。两种方法根据自己实际需求二选一使用即可。