'Firefox alt text appears while loading image
On Firefox if you refresh a page you'll see the alt text appearing while an image is loading.
You can see it just on this Mozilla page (check the first image).
This doesn't happen on Chrome and other modern browsers.
I find an old issue on Bugzilla but it results as Fixed.
On that topic I find this pseudo solution (also here on Stack)
img:-moz-loading {
visibility: hidden;
}
that works very well but as says the documentation it's non-standard:
Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Any solutions?
Notice: I won't consider solutions like color: transparent
or similar, that hide the alt text to users, as it's needed.
Solution 1:[1]
You can use onload
and onerror
to reset the color of the alt text when it's needed:
<img style="color: transparent;" onload="this.style.color='black'" onerror="this.style.color='black'" src="https://source.unsplash.com/random/100x100" alt="Alternate text" />
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Zach Jensz |