Load Image Asynchronous

If I have an image tag like the following: and if I add 'async' to it: will the image load 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>functionReLoadImages(){
    $('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 = newImage(),
    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).

<imgsrc="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.

<imgsrc="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

Solution 4:

An alternate way to async load an image is by using Promise in javascript, which serves the purpose of doing things asynchronously.

functionasyncImageLoader(url){
    returnnewPromise( (resolve, reject) => {
        var image = newImage()
        image.src = url
        image.onload = () =>resolve(image)
        image.onerror = () =>reject(newError('could not load image'))
    })
}    

// then use it like thisvar image = asyncImageLoader(url)


image.then( res => {
    console.log(res)
})
  

Solution 5:

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

The image tag doesnt supports any async attribute.

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element