如何让window的load事件在指定轮播图加载完成前触发

你提到的通过加类名让浏览器跳过window.load统计的方案不可行，因为window.load事件的触发逻辑是浏览器内置的，只要初始DOM中的<img>标签带有有效的非空src属性，浏览器就会自动加载该资源并将其纳入load事件的等待队列，没有原生机制可以通过类名排除这类资源统计。

对应的实现方案如下，核心思路是让轮播图资源在页面初始阶段不触发加载，等window.load触发、loader消失后再异步加载：

方案1：自定义延迟加载轮播图（无依赖通用方案） #

步骤1：修改轮播图的HTML结构 #

给所有需要延后加载的轮播图添加自定义类，将真实图片地址存到data-*自定义属性中，src属性填极小的透明占位图，避免初始加载：

<!-- 示例轮播图结构 -->
<div class="carousel">
  <div class="carousel-item">
    <img 
      class="carousel-lazy" 
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
      data-src="你的轮播图真实地址1" 
      alt="轮播图1"
    >
  </div>
  <div class="carousel-item">
    <img 
      class="carousel-lazy" 
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
      data-src="你的轮播图真实地址2" 
      alt="轮播图2"
    >
  </div>
</div>

步骤2：修改JS逻辑 #

保留原有的loader隐藏逻辑，在window.load触发后再批量替换轮播图的src属性，触发资源加载：

$(window).on("load", function(){
    // 先隐藏加载动画
    $(".loader").fadeOut("slow");
    // 再异步加载轮播图资源
    $(".carousel-lazy").each(function() {
      const realSrc = $(this).data("src");
      if (realSrc) $(this).attr("src", realSrc);
    });
})

方案2：使用Carousel组件自带的懒加载能力 #

如果你使用的是现成的Carousel组件（比如Swiper、Bootstrap Carousel等），绝大多数主流组件都内置了懒加载配置项，开启后组件会自动实现类似上述的延迟加载逻辑，不需要手动写属性替换代码，你只需要按照组件文档配置懒加载规则即可。

补充说明 #

如果你的轮播图需要被搜索引擎抓取，不想用data-src的方式存储地址，可以给轮播图添加原生的loading="lazy"属性，目前绝大多数现代浏览器会将视口外、带有loading="lazy"属性的图片排除在window.load的等待队列外，不需要修改JS逻辑也能实现loader提前消失的效果，缺点是老旧浏览器不支持该属性。

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