Geek asks and answers

Hide alt tag in firefox

According to the default behavior, the attribute is altdisplayed for the first time just before the image is rendered. I am showing 25 images in a grid, so it looks a bit uncomfortable since all attributes are displayed first alt.

Can I hide attributes altin Firefox?

Note: alt attributes contain dynamic names in my case.

+7
source share
9 answers

A way to prevent the display of attribute values altis to remove the attribute.

alt (not tag) , , , , . , , , , .

alt ( CSS-) Firefox, , ,

img { background: white; color: white; }

CSS. , alt , .

+13

, , , , :

.yourClass img {
    color: transparent;
}
+16

,

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

, , , alt , , , , , .

+2

title? ; , Firefox - . , img { color: white; } ?

0

, :

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

, ...:))

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)

, , .

0

:

img { 
  background: white; 
  color: white;
}

I also like to disable the default image behavior of Firefox:

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

Just found a better solution:

img:-moz-loading {
    font-size: 0;
}

This will hide alternate text while Firefox loads the contents of the image.

0
source

I would start by adding this CSS, which will hide all the images using alt text (not display: nonebecause we want to undo this and we won't know what to undo):

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

And then showing it as soon as it is loaded (this uses jQuery):

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

More articles:


All Articles