Html 在firefox中隐藏alt标记

根据默认行为，

alt

属性在图像渲染之前第一次渲染。我在一个网格中显示了25幅图像，所以看起来有点尴尬，因为所有的

alt

属性都是先显示的

是否可以在Firefox中隐藏

alt

属性

---

注意：

alt

属性在我的案例中包含动态名称。

您能将动态名称放在title属性中吗？ 你可以尝试黑色背景或黑色背景图像；也许Firefox仍然使用黑色文本颜色。

---

也许

img{color:white；}

可以吗？

如果您不介意添加一点额外的内容，这里是：

<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />

---

希望这有助于……：）

不必担心alt函数，您可以为所有图像提供一个公共类，比如说

image to show

，并创建一个完全位于该图像上方的加载div。因此，当页面加载时，您只显示加载div，并显示加载gif，如下所示：

// show loading image
$('.loader').show();

加载图像后，可以隐藏div并显示图像

// main image loaded ?
$('.image-to-show').load(function(){
  // hide/remove the loading image
  $('.loader').hide();
});

您可以通过使用特定的图像ID来进一步增强此代码。另一种更简洁的方法是为正在加载的图像设置

数据加载

为true，一旦加载图像，将

$（'.image to show'）.data（'load'，false）

---

有多种方法可以解决此问题，如果您需要进一步澄清，请告诉我。

我首先添加此CSS，它将隐藏所有带有alt文本的图像（而不是

显示：无

，因为我们想要撤消此操作，并且不知道要撤消什么）：

然后在全部加载后显示它（使用jQuery）：

---

防止显示

alt

属性值的方法是删除该属性

alt

属性（非标记）的含义是，在不显示图像的情况下，它指定了图像的替代品。因此，如果您想在图像尚未加载时隐藏它，那么您需要的行为与属性的含义相矛盾

但是，您可以在Firefox上设置

alt

文本不可见（使用通常的CSS警告），例如：

img { background: white; color: white; }

---

在CSS中。这意味着

alt

文本也不可见，以防浏览器从未获取图像，或者浏览器已配置为不显示图像。

在尝试了此处的所有其他方法后，我发现此方法最有效，它使文本透明，直到图像加载：

.yourClass img {
    color: transparent;
}

---

除了设置为：

img { 
  background: white; 
  color: white;
}

我还想禁用Firefox的默认图像行为：

img:-moz-loading {
  visibility: hidden;
}

---

从以上所有答案的参考中，我发现最好的答案是使用

img:-moz-loading {
  visibility: hidden;
}

---

假设没有图像，我们使用白色或透明的颜色，然后alt属性不再使用。因此，如果没有图像，我们需要此属性来显示要加载的图像和要显示的替代文本。

旧问题，但从2020年起，

img:-moz加载{visibility:hidden；}

不再起作用

与其做

img{background:white；color:white；}

，我认为这样做更有意义：

img {
   color: transparent;
}

这样它就不会弄乱本来应该有一定透明度的图像。此外，当您需要为img设置背景色时，它不会影响较少见的情况

要获得额外积分，您可以这样做：

<img src="src.com/src" onerror="this.style.color='black'"/>

如果浏览器无法获取图像，则会将其还原为正常的alt颜色

// main image loaded ?
$('.image-to-show').load(function(){
  // hide/remove the loading image
  $('.loader').hide();
});

---

当然，添加到每个图像中都很繁琐，但是如果您使用的是带有全局

组件的JS框架，那么就更容易了。

我已经在alt标记和title中放置了动态名称。我还尝试将color:white作为图像的内联样式，但没有成功。我正在使用wordpress wp types插件，在应用内联样式后，甚至没有渲染一幅图像。我需要隐藏现有的alt标记，而不是用您在示例中描述的其他标记替换它。不幸的是，我不能这样做，因为图像是由插件（wordpress）渲染的。所以我不能对插件的核心文件做任何更改。我正在寻找一个隐藏alt标签的解决方案。好吧，使用像wordpress这样的CMS最好的一点是，你可以灵活地修改你想要的代码。无论如何，插件会为你的图像创建一些标记。获取图像的ID或类作为选择器，获取变量中的

alt

属性，将其清除，并在图像加载时将其写回DOM。丑陋但实用：DFWIW、Chrome和Edge都是这样工作的（加载图像时都不显示

alt

文本）。所以我申请了Firefox，希望它将来也能有同样的表现。。请参见此处的答案。我认为删除

alt

属性不是一个好主意。视障用户使用屏幕阅读器，屏幕阅读器为他们读取图像

alt

元素，因此他们也知道网站上显示的内容。对我来说，通过添加img:-moz加载伪类解决了这个问题。。请参阅此处的答案这应该是公认的答案，因为这保留了alt attr的使用，同时不会使加载页面变得丑陋！实际上，如果使用

color:transparent

而不是

visibility:hidden

<img src="src.com/src" onerror="this.style.color='black'"/>