除特定图片外，身体是否处于活动状态？

问题描述

我有一个HTML页面，其中包含大量文本和图像。一幅特定的图像加载缓慢。当页面的其余所有部分都加载完后，除了该特定图像，我想做些事情。像这样：

<!DOCTYPE html>
<html>
  <head></head>
  <body onloadExceptSlowImage="doSomething();">
    ... several things,including some quick images ...
    <img id="SlowImage" src="slowImage.jpg" />
    ... several things,including some quick images ...
  </body>
</html>

这可能吗？怎么样？

解决方法

经过深思熟虑，我想到了一个简单的解决方法：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function doSomething() {
        // Do whatever
        document.getElementById("SlowImage").src="slowImage.jpg";
      }
    </script>
  </head>
  <body onload="doSomething();">
    ... several things,including some quick images ...
    <img id="SlowImage" src="tempImage.jpg" />
    ... several things,including some quick images ...
  </body>
</html>

您可以执行以下操作。

let loadedImagesEvent = new Event("loadExceptSlowImage")
let loadedImages = []
let lengthOfAllImages = document.querySelectorAll("img").length
let imagesExceptSlowImage = document.querySelectorAll("img:not(#SlowImage)")

imagesExceptSlowImage.forEach((img) => {
   img.onload = () => {
      loadedImages.push(img)
      if (loadedImages.length == lengthOfAllImages - 1) {
         window.dispatchEvent(loadedImagesEvent)
      }
   }
})

window.addEventListener("loadExceptSlowImage",() => {
   // Your Code
})

html javascript