html - srcset用法 - 在Firefox中隐藏ALT标记




img标签 (5)

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

是否有可能在Firefox中隐藏alt属性?

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


不要担心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)

有多种方法来解决这个问题,让我知道如果你需要进一步澄清。


你可以把动态名称放在title属性中吗? 您可以尝试黑色背景或黑色背景图像; 也许Firefox仍然使用黑色的文字颜色。 也许img { color: white; } img { color: white; }会做什么?


如果你不介意加一点额外的东西,这里是:

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

希望有助于... :))


我开始添加这个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';
    });
});

除了设置为:

img { 
  background: white; 
  color: white;
}

我喜欢禁用Firefox的默认图片行为:

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




alt