Question

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

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

注意： alt属性包含我的动态名称。

Answer 1

在这里尝试了所有其他方法之后，我发现这种方法效果最好，这使得文本在图像加载之前是透明的：

.yourClass img {
    color: transparent;
}

Answer 2

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

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

但是，您可以通过设置例如在Firefox上使alt文本不可见（使用常见的CSS注意事项）。

img { background: white; color: white; }

在CSS中

。这意味着，如果浏览器永远不会获取图像，或者浏览器已配置为不显示图像，alt文本也是不可见的。

Answer 3

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

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

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

>

Answer 4

除了设置为：

img { 
  background: white; 
  color: white;
}

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

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

Answer 5

您可以将动态名称放在标题属性中吗？你可以尝试黑色背景或黑色背景图像;也许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。因此，当页面加载时，您只显示加载div，加载gif，如下所示：

// 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';
    });
});

在Firefox中隐藏alt标签

9 个答案: