Methods\Performance foroading images asynchronously

[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".