I'm using the jQuery Lazyload plugin and currently leaving the img tags blank because when the images haven't been loaded yet, the image alt tag text is visible.
I need to find a way not to show the alt tag text when the image hasn't been loaded. From what I've seen in looking around the plugin page, there doesn't seem to be a way to fire a callback function after an image is loaded. I thought about trying to obscure the img element and then show it again after the image is loaded, but can't figure out how to make that work without some kind of callback.
Is there a simple way to hide the alt text when the image hasn't yet been loaded? Thank you!
Alt tags are used to describe the contents of images, but some images don't convey any meaning and are therefore considered "decorative." Decorative images do not need to be announced by the screen reader, so if the alt attribute is empty (alt="", aka a "null" tag) it will not be announced to the user.
How about using font-size: 0 ? It works in hiding alt text before image loads or if image src URL is not available.
Don't add alt text to every image. You should add alt text to most images on a webpage for the sake of SEO, UX, and accessibility — however, there are exceptions. Images that are purely decorative or are described in text nearby, for example, should have an empty alt attribute.
All banner images will need alt text, and how you add it depends on whether it appears on a home page or content page.
Hide alt text with css:
img {
color: transparent;
}
Do stuff after image load:
$("img").on("load", function(){
console.log("loaded!")
});
The below will keep both the broken image icon and the text in the Alt tag from showing until the image comes in. You want to NOT use Alt="" because it is bad from a google SEO standpoint. 'visibility: hidden' is preferred vs. 'disply: none' as it can break the page.
<style>
img:not([src]) {
visibility: hidden;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With