load image asynchronous

Solution 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>

Solution 2:

var img = new Image(),
    url = "myimg.jpg",
    container = document.getElementById("holder-div");

img.onload = function () { container.appendChild(img); };
img.src = url;

This would start loading an image as soon as you request it in-script, and whenever the image was done loading, it would grab and add the image to it.

There are lots of other ways of doing this...
This is just a dead-simple example of async loading of a single image.

But the moral is this:
For async loading to work, either load it in JavaScript and use the onload, or include the image tag on the page, without the src attribute (specify the width and height in HTML), and go back at some point, in JS, and set the image URL.

Solution 3:

The modern way to do this is with the loading attribute for images and iframes.

Attribute: loading=lazy

This will defer loading of the content until the element reaches a calculated distance from the viewport (that just means, it's got quite likely that the user will scroll it into view).

<img src="defer.png" loading="lazy" alt="An Awesome Image" width="500" height="400">

Setting the attribute to lazy invokes the new behaviour.

This is already in Chromium since v76, but might not hit non-Chromium browsers until it goes through the usual specification shennanigans.

If you are going to defer loading using a script, it would be worth writing the image with the lazy attribute and polyfilling the behavior as opposed to working off of a class name, etc. That way, you can allow the native version to take over as it becomes available.

Forced Eager Loading

Automatic lazy loading may become a feature of lightweight browsing, in which case, you may want to do the inverse and force an image to load. You can use the same loading attribute with a value of eager to ask the browser to grab the image even if it might otherwise choose not to.

<img src="defer.png" loading="eager" alt="An Awesome Image" width="500" height="400">

Further reading

View the pull request for the WHATWG spec

Fallback JavaScript with notes about perhaps not using fallbacks