javascriptjqueryimagelazy-loading

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!


Solution

  • Hide alt text with css:

    img {
    color: transparent;
    }
    

    Do stuff after image load:

    $("img").on("load", function(){
     console.log("loaded!")
    });