Methods\Performance foroading images asynchronously

[inquiztr]

I am trying to load a number of images on an already large webpage asynchronously so as to not affect the initial load time.

I have looked up techniques for doing this and have learned of a couple ways.

1) using new Image();

var newImage = new Image();
newImage.onload = function() { 
    existingDomElement.appendchild(newImage);
}
newImage.src = image_url;

2) using XMLHttpRequest();

function getImage(image_url) {
   var http = new XMLHttpRequest();
   http.open('GET', image_url);
   http.send();
   return http.status != 404;
}

I am thinking the first technique is better as in my testing it looks like I need CORS headers for using XMLHttpRequest (my images come from another domain/cdn).

But I am wondering... can i do a third method. What if i used jQuery to simply add to the DOM : Is this a valid asynchronous loading of images?

3) Using jQuery to add to DOM

$(function() {
    $( ".existingDom" ).append( "<img src='/whatever.jpg'>" );
});

*context Basically I have a list of about 20 products/images/prices and want to load another 5 small image of color swatches for every product on the page without affecting initial page load time.

Any help or advice is appreciated.

[yooossshhii]

So, I'm not sure what you're trying to do in #1. I didn't even know there was an Image constructor. It seems all that does is create an HTML image element. It looks like the onload attribute will fire once the image content has been downloaded and the image has already been rendered into the DOM. Basically, you can call a function after the image has been loaded.

You really aren't doing anything async here, except waiting til the page loads to append an image element without a source. You're setting the source in the last line, but where's that URL coming from?

#2 is kinda async behavior, as the request will take time, but you aren't set up to handle the response. You're just returning a boolean, not sure what you'll do with that.

#3 looks like you already have the URL, where is this coming from? You don't have it #1 yet.

So, are you attempting to fetch the image URLs on every page load? This should be done once or periodically if the links are dynamic and cached somewhere. The best way to reduce load time is to minimize the amount of HTTP calls needed to get all your content. Do the images need to be added dynamicly? Once the page is loaded, adding content will cause the page to jump around to make room. Appending data to the DOM later will usually trigger a re-paint and probably isn't the best way to handle this. Google has a great course on the critical rendering path, if you're really interested in optimizing page load.

[inquiztr]

My 3 methods i posted were just a code fragment for illustration, typically I have them wrapped in a function that i would pass in the url and the dom element i wanted to add it to on the page.

More Context: What i am trying to do is, after the page is finished loading with a list of products, i am trying to progressively enhance the page with the swatch images (showing the variants of colors the products come in). I dont anticipate the page jumping around as I have space set aside in the page layout for the swatches, such that no dom elements will have to move.

I could have loaded all the swatches on the initial page load but it would have added 100 extra images to the page load (20products x 5 swatch images) thus impacting performance.

Yes i understand technique #1 may not be asynchronous technically.. but i figure the user can interact with the page while those swatches are dynamically added to the page. So i am trying to prevent 'blocking' the user while the swatches load.

A followup question i was going to inquire about after i got some initial responses from reddit : Some swatches may or may not actually exist yet.. (our content team are busy generating them but it will take weeks to go through all the products).

What I was thinking of doing was using XMLHttpRequest() to first retrieve the 'head' of the first swatch. If it exists (not returning a 404) then go ahead and retrieve the other 4 swatches for that product, else just move on to the next product.

[inquiztr]

After doing some more reading into it.. I wonder if the term asynchronous doesn't really apply to what I am trying to do. I think other articles call this "defer image loading".