在Firefox中隐藏alt标签

Question

根据默认行为，alt属性在图像渲染之前第一次渲染。我正在网格中显示25张图像，因此当所有alt属性首先显示时，它看起来有点尴尬。

是否可以在Firefox中隐藏alt属性？

注意： alt属性在我的情况下包含动态名称。

Answer 1

防止显示alt属性值的方法是删除该属性。

alt属性（不是标签）的含义是，在不显示图像的情况下，它指定图像的替代方案。因此，如果要在尚未加载图像时将其隐藏，则要求的行为与属性的含义相矛盾。

但是您可以通过设置例如使alt文本在Firefox上不可见（使用常规的CSS警告）

img { background: white; color: white; }

在CSS中。这意味着即使浏览器从不获取图像，或者将浏览器配置为不显示图像，alt文本也不可见。

Answer 2

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

.yourClass img {
    color: transparent;
}

Answer 3

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

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

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

Answer 4

除了设置为：

img { 
  background: white; 
  color: white;
}

我也希望禁用Firefox的默认图像行为：

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

Answer 5

您可以将动态名称放在title属性中吗？您可以尝试使用黑色背景或黑色背景图像；也许Firefox仍使用黑色文本颜色。也许img { color: white; }可以吗？

Answer 6

如果您不介意添加一些额外内容，则为：

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

希望有帮助...：））

Answer 7

无需担心alt功能，您可以为所有图像提供一个通用类，例如image-to-show，并创建一个绝对位于该图像上方的加载div。因此，当页面加载时，您仅显示带有gif的加载div，如下所示：

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

一旦加载图像，您可以隐藏div并显示图像。

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

您可以通过使用特定的图像ID来进一步增强此代码。另一种更清洁的方法是将正在加载的图像的data-loading设置为true，然后在加载图像后将$('.image-to-show').data('loading', false)

设置为

有多种解决方法，如果需要进一步说明，请告诉我。

Answer 8

旧问题，但到2020年，img:-moz-loading {visibility: hidden;}不再起作用。

代替执行img {background: white; color: white;}，我认为这样做更有意义：

img {
   color: transparent;
}

这样，它不会弄乱应该具有一定透明度的图像。另外，当您需要为img设置背景颜色时，它也不会影响少数情况。

关于积分，您可以这样做：

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

如果浏览器无法获取图像，它将还原为正常的替代颜色。

当然，将它添加到每个图像很繁琐，但是如果您使用的是带有全局<Image/>组件的JS框架，则更容易。

Answer 9

我首先添加此CSS，它将隐藏所有带有替代文本的图像（不是display: none，因为我们要撤消此操作，并且我们不知道要撤消的内容：]

img[alt] {
    width: 0;
    height: 0;
}

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

$(document).ready(function() {
    $('img[alt]').on('load', function() {
        this.style.width = 'auto';
        this.style.height = 'auto';
    });
});