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!

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!

• javascript
• jquery
• image
• lazy-loading

3 Answers 3

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>

It would be better to load a transparent image 1px x 1px png. This keeps your HTML valid and prevents any ghosting of the alt text or border of alt text.