网站图片预加载问题：加载GIF无法隐藏的排查与修复方案

错误点分析 #

1. 选择器范围错误：原代码选中了所有<img>标签，而非需求中指定的带有img-loading类的图片，逻辑范围不符合要求。
2. 缓存图片未触发load事件：如果图片已在浏览器缓存中，jQuery的load事件不会执行，包裹的加载容器无法被移除，导致加载GIF持续显示。
3. 类名冲突风险：原代码给包裹容器和目标图片使用了同一个img-loading类，容易引发样式和逻辑的混淆。

修改后的代码 #

jQuery代码

// 仅针对带有img-loading类的图片执行预加载逻辑
$('img.img-loading').each(function() {
  const $img = $(this);
  // 初始隐藏图片
  $img.css('opacity', 0);
  
  // 创建独立的加载容器并包裹图片
  const $loadingWrapper = $('<div class="img-loading-wrapper"></div>')
    .insertBefore($img)
    .append($img);
  
  // 加载完成后的统一处理逻辑
  function onImageLoaded() {
    // 移除加载容器，彻底清除加载GIF背景
    $loadingWrapper.remove();
    // 渐显图片
    $img.animate({ opacity: 1 }, 500);
  }
  
  // 绑定图片加载完成事件
  $img.on('load', onImageLoaded);
  
  // 处理缓存图片：如果图片已加载完成，直接执行显示逻辑
  if ($img[0].complete) {
    onImageLoaded();
  }
});

CSS代码

/* 独立的加载容器样式，避免和图片类名冲突 */
.img-loading-wrapper {
  background: url('/img/loading.gif') 50% 50% no-repeat;
  /* 可选：设置与图片一致的显示方式，防止布局跳动 */
  display: inline-block;
  width: 100%;
  height: auto;
}

关键优化说明 #

• 精准选择目标图片：使用img.img-loading选择器，仅对指定类的图片生效，符合需求。
• 解决缓存问题：通过检查img.complete属性，确保缓存图片也能触发加载完成逻辑，避免加载GIF残留。
• 分离样式容器：使用独立的img-loading-wrapper类作为加载容器，避免和图片的类名冲突，样式逻辑更清晰。
• 彻底移除加载状态：直接删除加载容器，而非仅执行unwrap操作，确保加载GIF完全消失。

内容的提问来源于stack exchange，提问作者Nedjma Média