html - load image asynchronous

Question

If I have an image tag like the following:

<img src="myimage.jpg" />

and if I add "async" to it:

<img async src="myimage.jpg" />

will the image load asynchronous?

question from:https://stackoverflow.com/questions/15999760/load-image-asynchronous

Answer 1

The way to async load (lazy load) the content is to not set the 'src' attribute and then execute a script that loads the images once DOM-ready is launched.

 <img data-lazysrc='http://www.amazingjokes.com/images/20140902-amazingjokes-title.png'/>

and with jQuery (or possible with plain JavaScript too) use below code (as suggested here):

<script>  
function ReLoadImages(){
    $('img[data-lazysrc]').each( function(){
        //* set the img src from data-src
        $( this ).attr( 'src', $( this ).attr( 'data-lazysrc' ) );
        }
    );
}

document.addEventListener('readystatechange', event => {
    if (event.target.readyState === "interactive") {  //or at "complete" if you want it to execute in the most last state of window.
        ReLoadImages();
    }
});
</script>