如何实现HTML页面排除特定慢加载图片后触发加载完成操作？

当然可行！我来给你两种实用的实现方案，完全能满足你“页面其余内容加载完（排除慢图）就执行操作”的需求~

方法一：延迟加载慢图片（推荐） #

这个思路最直接——先不让那张慢加载图片进入页面初始加载队列，等页面其他所有内容都加载完成后，再去加载它。这样原生的window.load事件就会在你想要的时机触发，完美匹配你的需求。

具体步骤：

1. 把慢图片的src属性换成自定义的data-src，存储真实的图片地址（这样浏览器一开始不会加载它）
2. 监听window.load事件——这个事件会在页面所有已指定src的资源（脚本、样式、快速图片等）加载完成后触发
3. 在事件回调里，先执行你的doSomething()，再给慢图片设置src让它开始加载

代码示例：

<!DOCTYPE html>
<html>
<head></head>
<body>
  ... 若干内容，包括一些加载快的图片 ...
  <!-- 用data-src存真实地址，不设置src -->
  <img id="SlowImage" data-src="slowImage.jpg" alt="慢加载图片" />
  ... 若干内容，包括一些加载快的图片 ...

  <script>
    // 监听页面其他所有资源加载完成
    window.addEventListener('load', function() {
      // 执行你想要的操作
      doSomething();

      // 现在再加载慢图片
      const slowImg = document.getElementById('SlowImage');
      slowImg.src = slowImg.dataset.src;
    });

    function doSomething() {
      console.log('页面除慢图片外已全部加载完成！');
      // 这里写你的业务逻辑，比如显示加载完成提示、初始化交互等
    }
  </script>
</body>
</html>

这个方案的优点是逻辑简单、性能友好，完全不会让慢图片拖慢你要执行的操作时机。

方法二：监听资源加载并排除慢图片 #

如果你的场景要求慢图片必须和其他内容同时开始加载，但要在其他所有资源加载完后立刻执行操作，那可以用这个方案：统计所有资源的加载状态，排除那张慢图片，等其他资源都加载完成后触发操作。

具体步骤：

1. 获取页面所有需要加载的资源（图片、脚本、样式表），排除id为SlowImage的图片
2. 统计这些资源的加载完成情况，包括已加载、加载成功、加载失败的情况（避免某个资源加载失败导致永远不触发）
3. 当所有目标资源都加载完成后，执行doSomething()
4. 加上window.load事件作为兜底，防止遗漏某些资源

代码示例：

<!DOCTYPE html>
<html>
<head></head>
<body>
  ... 若干内容，包括一些加载快的图片 ...
  <img id="SlowImage" src="slowImage.jpg" alt="慢加载图片" />
  ... 若干内容，包括一些加载快的图片 ...

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取所有需要监听的资源，排除慢图片
      const targetResources = Array.from(document.querySelectorAll('img, script[src], link[rel="stylesheet"]'))
        .filter(el => el.id !== 'SlowImage');

      let loadedCount = 0;
      const total = targetResources.length;

      // 如果没有其他需要加载的资源，直接执行
      if (total === 0) {
        doSomething();
        return;
      }

      // 遍历资源，监听加载状态
      targetResources.forEach(resource => {
        // 资源已经加载完成的情况
        if (resource.complete) {
          loadedCount++;
          checkCompletion();
          return;
        }

        // 监听加载成功
        resource.addEventListener('load', () => {
          loadedCount++;
          checkCompletion();
        });

        // 监听加载失败（避免卡住）
        resource.addEventListener('error', () => {
          loadedCount++;
          checkCompletion();
        });
      });

      // 兜底：window.load触发时，强制检查是否完成
      window.addEventListener('load', () => {
        if (loadedCount < total) {
          loadedCount = total;
          checkCompletion();
        }
      });

      // 检查是否所有目标资源都加载完成
      function checkCompletion() {
        if (loadedCount === total) {
          doSomething();
        }
      }
    });

    function doSomething() {
      console.log('页面除慢图片外已全部加载完成！');
      // 你的业务逻辑写在这里
    }
  </script>
</body>
</html>

这个方案适合必须让慢图片同时加载的场景，但逻辑相对复杂，需要处理各种边界情况。

内容的提问来源于stack exchange，提问作者Free Bud