Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to hide alt tags for unloaded lazyload images?

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!

like image 475
Hendeca Avatar asked May 03 '16 00:05

Hendeca


People also ask

Can you leave an alt tag empty?

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 do I hide alt text in CSS?

How about using font-size: 0 ? It works in hiding alt text before image loads or if image src URL is not available.

Do all images need alt tags?

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.

Should banner images have alt text?

All banner images will need alt text, and how you add it depends on whether it appears on a home page or content page.


2 Answers

Hide alt text with css:

img {
color: transparent;
}

Do stuff after image load:

$("img").on("load", function(){
 console.log("loaded!")
});
like image 173
yezzz Avatar answered Oct 05 '22 14:10

yezzz


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>
like image 27
AZ Chad Avatar answered Oct 05 '22 14:10

AZ Chad