preload image with javascript and display when ready

Question

I want to show a low-res image and start loading the hi-res image after the complete page has rendered. Only when the hi-res image is completely loaded, I want to replace th

Answer 1

Use this script to preload the images:

Then use low-res images in your html as you need and change to hi-res images when needed. The preloaded image is there for you.

$(window).load(function(){
   $(selector).css('background-image',images[0]);
});