hide alt tag in firefox

Question

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.

Heterotaxis

FWIW, Chrome and Edge work this way (both do not show alt text while loading the image). So I filed bugzilla.mozilla.org/show_bug.cgi?id=1472637 for Firefox so it hopefully behaves the same in the future. – Negligee

Have a look at this: https://mcmap.net/q/98834/-how-to-hide-image-broken-icon-using-only-css-html – Throve

Answer 1

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.

Springhalt

for me it got solved by adding img:-moz-loading pseudo class.. see answer here https://mcmap.net/q/910130/-border-and-title-showing-while-image-loading-in-firefox – Everard

I don't think it is a good idea to delete the alt attribute. Users that are visually impaired use screen readers, which read the image alt element for them, so they also know what's being displayed on the site. – Pareto

Answer 2

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;
}

Parochial

for me it got solved by adding img:-moz-loading pseudo class.. see answer here https://mcmap.net/q/910130/-border-and-title-showing-while-image-loading-in-firefox – Everard

Answer 3

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.

Fifield

This should be the accepted answer as this preserves the use of an alt-attr while not making the loading page ugly! Actually, it would be even better, with color: transparent instead of visibility: hidden – Brod

That's a Non-standard feature, Mozilla doesn't recommend to use in production. You guys do? developer.mozilla.org/en-US/docs/Web/CSS/:-moz-loading – Floating

Answer 4

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.

Richerson

Better use onerror="this.style.color='unset'" to simply revert to the previous color instead of having to hardcode a color. – Remand

Answer 5

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;
}

Kaylyn

Answer 6

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?

Gyniatrics

I have placed dynamic names in alt tag as well as title. I also tried placing color:white as inline style for images but it did not work. I am using wordpress wp-types plugin and after applying inline style, not even a single image rendered. – Heterotaxis

Answer 7

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... :))

Giselle

I need to hide the existing alt tags, not replacing it with something else that you described in your example. – Heterotaxis

Answer 8

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.

Loxodromics

Unfortunately i can not do this because images are being rendered by a plugin (Wordpress). So i can not make any change in the core files of plugin. I am looking for a solution just to hide alt tag. – Heterotaxis

Well, the best part about working with a CMS like wordpress is that you have the flexibility to modify code the way you want it working. Anyhow, the plugin would create some markup, for your images. Get the ID or the class for the images as your selector, get the alt attribute in a variable, wipe it clean and on image load write it back into the DOM. Ugly, but functional :D – Loxodromics

Answer 9

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

Jagged