CODEWITHSUNDEEP
htmlfirefoxattributeshidealt
Neeraj
Neeraj

Reputation: 9145

hide alt tag in firefox

As per the default behavior, alt attribute is rendered first time just before the image rendering. I am displaying 25 images in a grid so it looks bit awkward as all alt attributes are displayed first.

Is it possible to hide alt attributes in Firefox?

Note: alt attributes contain dynamic names in my case.

Upvotes: 12

Views: 14228

Answers (9)

Symphony0084
Symphony0084

Reputation: 1435

Old question, but as of 2020, the img:-moz-loading {visibility: hidden;} does not work any longer.

Instead of doing img {background: white; color: white;}, I think it makes a lot more sense to do this:

img {
   color: transparent;
}

That way it doesn't mess up images that are supposed to have some transparency. Also, it doesn't affect the rarer cases when you need to set a background color for an img.

For bonus points you could do this:

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

That would revert it to the normal alt color in the event that the browser fails to fetch the image.

Of course this is tedious to add to every image, but easier if you are using a JS framework with a global <Image/> component.

Upvotes: 5

Vikram
Vikram

Reputation: 177

From the reference of all the above answers, I figured out best one is to use 

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

Suppose there is no image and we use color as white or transparent then alt attribute no more use so, we need this attribute if there is no image to show which image here to load and to show alternative text to display.

Upvotes: 9

Justin Tanner
Justin Tanner

Reputation: 14352

In addition to setting to:

img { 
  background: white; 
  color: white;
}

I like to disable Firefox's default image behavoir as well:

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

Upvotes: 1

user unknown
user unknown

Reputation: 483

After trying all the other methods here, I found this method works best which makes the text transparent until the image loads:

.yourClass img {
    color: transparent;
}

Upvotes: 21

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The way to prevent alt attribute values from being displayed is to remove the attribute.

The meaning of an alt attribute (not tag) is that it specifies an alternative, a substitute for the image, in situations where the image is not displayed. So if you want to hide it when the image has not yet been loaded, you are asking for behavior that contradicts the very meaning of the attribute.

You can however make the alt text invisible (with the usual CSS Caveats) on Firefox by setting e.g.

img { background: white; color: white; }

in CSS. This implies that the alt texts are invisible also in case the browser never gets the image, or the browser has been configured not to display images.

Upvotes: 12

Evan Hahn
Evan Hahn

Reputation: 12712

I'd start by adding this CSS, which will hide all images with alt text (not display: none because we want to undo this and we won't know what to undo to):

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

And then showing it once it's all loaded (this uses jQuery):

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

Upvotes: -1

automaticAllDramatic
automaticAllDramatic

Reputation: 2063

Rather than worrying about the alt function, you can give all your images a common class, say image-to-show and create a loading div absolutely positioned over this image. So, when the page loads, you only show the loading div, with a loading gif, something like this:

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

Once the image is loaded, you can hide the div and show the image.

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

You can further enhance this code by using specific image ID's. Another, cleaner way to do it would be to set data-loading to true for the images that are loading and once the images are loaded, set $('.image-to-show').data('loading', false)

There are multiple ways of tackling this, let me know if you need further clarification.

Upvotes: 0

peter.aryanto
peter.aryanto

Reputation: 522

If you don't mind adding a little extra, here it is:

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

Hope that helps... :))

Upvotes: 0

Joop Eggen
Joop Eggen

Reputation: 109547

Could you place the dynamic names in the title attribute? You could try a black background or black background image; maybe Firefox still uses a black text color. Maybe img { color: white; } would do?

Upvotes: 0

Related Questions