Persistent alt text flashing in Firefox when loading images

Question

When loading images on my site, firefox briefly (for around half a second) flashes the alt text before the image loads.

There are other issues about this, but everyone suggests adding

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

I have done so in the top-level CSS for the site, and it seemed to work in the past but has regressed. The alt text still flashes, and I can't find any alternative paths forward. There is a closed Bugzilla report without any activity in the past 5 years.

Any idea on how to dig deeper into this? From what I can tell the img element has nothing non-standard going on.

Answer 1

I assume that you have some kind of lazy loader.
So you can hide alt until img has src like this:

setTimeout(() => {
  img.src = 'https://picsum.photos/120/120';
  imgBroken.src = 'https://pics';
} , 1000);

/* Hide img without src */
img:not([src]) {
  visibility: hidden;
}

/* Нidden alt in img */
.img-hide-alt {
  font-size: 0;
}

<img src="https://picsum.photos/120/120" class="img-hide-alt" alt="Test">

<img alt="Test" id="img">
<img alt="Test" id="imgBroken">

Answer 2

You can set transparent text color on the image:

img { color: transparent; }

It seems to do the job in Firefox 123. Below is the filmstrip view of the page load generated by webpagetest.org:

• The test was done on Firefox nightly on a fast 3G network. All four images have alt, width, height and background-color set.

• The top two images do not have any CSS while the bottom two images have color: transparent.

• The top two images display the alternate text until the image starts rendering. The bottom two images do not display the alternate text at all.

---

As for :-moz-loading, the documentation says that:

Note that images that are in the process of loading are not matched by this pseudo-class.

The description of "in the process of loading" is not provided but we can assume that the process starts as soon as the image is "queued" for downloading.

Answer 3

I think that, between the lines, @imhvost suggests a sort of latency at loading of images. In this case (or indeed when the link is broken), the alt attribute is displayed. I downloaded Firefox 123.0 (64 bits) for windows 11 and haven't noticed the issue you describe.

I made this little snippet just to ask you if it is the same behavior you're facing :

function sleep(time) {
  // https://stackoverflow.com/a/951057/4698373
  return new Promise((resolve) => setTimeout(resolve, time));
}

sleep(500).then(() => {
  const img = document.querySelector('img');
  img.src = 'https://picsum.photos/200/200';
  img.dataset.imgLoaded = "true";
});

<img src="" alt="This is my life." />

In that case, digging why the images are so slow to load with Firefox must be done, but we need more informations about your infrastructure and your configuration.

In the meantime, here is another snippet that could temporarily help you :

const images = document.querySelectorAll('img');
for (img of images) {
  if (img.dataset.src) {
    img.src = img.dataset.src;
  }
}

img {
  color: transparent;
}

img[src] {
  color: black;
}

<img data-src="https://picsum.photos/200/200" alt="lorem" />
<img data-src="https://picsum.photos/200/200" alt="ipsum" />
<img data-src="https://picsum.photos/200/200" alt="dolor" />
<img data-src="https://picsum.photos/200/200" alt="sit" />
<img data-src="https://picsum.photos/200/200" alt="amet" />

A few explanations :

• We use img elements dataset : data-src instead of src, so no image is displayed, nor alt attributes as their color is set to transparent by css.
• The script loops through the img collection and sets regular src
• By css rule, the alt color is set to black.

Certainly not the ultimate solution, but once again we need more informations, at least a location inside your infrastructure from where we could use some example images.

---

EDIT

Please note that

The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.

This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet. Source