HTML | DOM Image complete 属性

complete 属性是用于检测图像是否已经加载完成的 DOM 属性。它对于需要等待图像加载完成的操作很有用。在某些情况下，需要确保图像加载完成后再执行某些操作，这时可以利用 complete 属性进行检测。

语法

bool = image.complete;

返回值

complete 属性返回一个布尔值，表示图像是否已经加载完成。如果图像已加载完成，该属性值为 true，否则为 false。

示例

<img id="myImage" src="picture.jpg" />

<script>
  const img = document.getElementById("myImage");
  if (img.complete) {
    console.log("Image is loaded.");
  } else {
    console.log("Image is not yet loaded.");
  }
</script>

在上述示例中，当图像加载完成后，控制台将输出 "Image is loaded."。

注意事项

• complete 属性只适用于 <img> 元素，其他元素返回值是 undefined。
• 如果图像尚未加载完成，尽管 complete 属性值为 false，也可以使用 src 属性对图像进行引用。
• 在使用 complete 属性时要注意浏览器缓存，如果图像已经被缓存，可能会导致 complete 属性无法正确检测图像是否已经加载完成。