Firefox加载图片时alt文本闪烁，img:-moz-loading方案失效求助

以下是针对该问题的具体排查方向：

1. 验证标准伪类替代方案 #

旧的:-moz-loading非标准伪类可能已被Firefox移除或变更行为，尝试替换为标准的:loading伪类测试：

img:loading {
  visibility: hidden;
}

当前主流浏览器已逐步支持标准的:loading伪类，Firefox较新版本大概率已切换到该标准实现。

2. 检查CSS规则的优先级与生效状态 #

• 打开Firefox开发者工具（F12），选中目标img元素，查看样式面板中visibility属性的计算值，确认你的隐藏规则是否被更高优先级的样式（如内联样式、ID选择器、!important规则）覆盖。
• 检查顶层CSS文件是否存在语法错误，导致规则未被正确解析生效。

3. 调整DOM渲染与图片加载时机的关联 #

如果图片是动态插入DOM的，可能出现CSS规则晚于元素渲染的情况，尝试以下两种方案：

• CSS过渡方案：初始隐藏图片，加载完成后显示，用过渡避免生硬闪烁：

img {
  visibility: hidden;
  transition: visibility 0s 0.2s;
}
img:loaded {
  visibility: visible;
  transition-delay: 0s;
}

• JavaScript监听方案：通过事件监听精准控制显示时机，同时兼顾加载失败场景：

document.querySelectorAll('img').forEach(img => {
  if (img.complete) {
    img.style.visibility = 'visible';
  } else {
    img.addEventListener('load', () => img.style.visibility = 'visible');
    img.addEventListener('error', () => img.style.visibility = 'visible'); // 加载失败时正常显示alt文本
  }
});

4. 清除浏览器缓存强制刷新 #

浏览器缓存旧资源可能导致新CSS规则不生效，按Ctrl+Shift+R强制刷新页面，或在CSS文件URL后添加版本号（如style.css?v=2）强制浏览器加载最新资源。

5. 排查扩展或用户样式干扰 #

部分Firefox扩展（如自定义样式、广告拦截工具）可能篡改页面样式，导致规则失效。尝试在无痕窗口（默认禁用扩展）中测试，若问题消失则排查已安装的扩展。

6. 尝试占位容器替代方案 #

若伪类方案彻底失效，可使用与图片尺寸一致的容器作为占位，初始隐藏img元素，待图片加载完成后替换显示，同时确保不破坏屏幕阅读器对alt文本的访问性。

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