如何等待指定图片资源加载完成后再执行后续JavaScript代码

实现思路 #

我们只需要给需要提前加载的首屏元素做特殊标记，逐一监听对应图片的加载状态，全部加载完成（含加载失败的情况，避免加载器无限卡住）后触发后续逻辑即可，不需要监听页面内所有图片资源。

第一步：给需要监听的元素加标记 #

给要等待加载的<img>和带背景图的<div>添加自定义属性data-preload，方便JS快速筛选目标元素：

<!-- 需监听的img标签 -->
<img src="first-screen-banner.jpg" data-preload alt="首屏横幅">
<!-- 需监听的带背景图的div标签 -->
<div class="hero-section" style="background: url('first-screen-bg.jpg');" data-preload></div>

第二步：编写加载监听逻辑 #

// 入参：加载完成后的回调函数
function waitForSpecifiedImages(onComplete) {
  // 获取所有标记了预加载的元素
  const preloadElements = document.querySelectorAll('[data-preload]');
  if (preloadElements.length === 0) {
    // 没有需要预加载的图片直接执行回调
    onComplete();
    return;
  }

  let loadedCount = 0;
  const totalCount = preloadElements.length;

  // 单张图片加载完成的处理
  const handleOneLoaded = () => {
    loadedCount++;
    if (loadedCount === totalCount) {
      onComplete();
    }
  };

  preloadElements.forEach(el => {
    let imgUrl;
    // 区分img标签和div背景图
    if (el.tagName.toLowerCase() === 'img') {
      imgUrl = el.src;
    } else {
      // 提取backgroundUrl里的图片地址，去掉包裹的url()、引号
      const bgStyle = getComputedStyle(el).backgroundImage;
      imgUrl = bgStyle.match(/url\(["']?([^"']*)["']?\)/)[1];
    }

    // 创建临时Image对象监听加载状态
    const tempImg = new Image();
    tempImg.src = imgUrl;
    // 加载成功/失败都标记为完成，避免加载器卡住
    tempImg.onload = handleOneLoaded;
    tempImg.onerror = handleOneLoaded;
  });
}

// 调用示例
waitForSpecifiedImages(() => {
  // 1. 关闭网站加载器，替换成自己的关闭函数即可
  hideSiteLoader();

  // 2. 动态加载其他功能脚本
  const scriptsToLoad = ['animation.js', 'interaction.js'];
  scriptsToLoad.forEach(scriptUrl => {
    const script = document.createElement('script');
    script.src = scriptUrl;
    document.body.appendChild(script);
  });
});

注意事项 #

• 如果需要调整预加载的图片，只要给对应元素加/删data-preload属性即可，不需要修改JS逻辑
• 代码中对图片加载失败的场景也做了兼容，不会因为某张首屏图加载失败导致加载器一直显示，你如果需要对加载失败的情况做特殊处理，可以修改onerror对应的逻辑

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