9

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

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

注意： alt在我的例子中，属性包含动态名称。

4

9 回答 9

19

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

.yourClass img {
    color: transparent;
}
于 2014-01-21T23:04:05.860 回答
13

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

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

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

img { background: white; color: white; }

在 CSS 中。这意味着alt在浏览器永远无法获取图像或浏览器已配置为不显示图像的情况下，文本也是不可见的。

于 2012-10-01T06:27:43.240 回答
8

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

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

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

于 2018-07-18T10:33:48.930 回答
1

除了设置为：

img { 
  background: white; 
  color: white;
}

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

img:-moz-loading {
  visibility: hidden;
}
于 2015-01-21T05:36:32.427 回答
1

老问题，但截至 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'"/>

如果浏览器无法获取图像，这会将其恢复为正常的 alt 颜色。

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

于 2020-04-28T06:21:44.287 回答
0

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

于 2012-10-01T05:37:20.917 回答
0

如果你不介意添加一些额外的东西，这里是：

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

希望对您有所帮助... :))

于 2012-10-01T05:51:28.933 回答
0

无需担心 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)

有多种方法可以解决这个问题，如果您需要进一步说明，请告诉我。

于 2012-10-01T05:53:20.860 回答
-1

我将从添加这个 CSS 开始，它将隐藏所有带有 alt 文本的图像（不是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';
    });
});
于 2012-10-01T06:19:30.020 回答