How to I preload images where it actually forces the images to load before continuing (html/javascript)?

Question

I want to preload images but ensure they are loaded before continuing. How can I do this?

The following does not work as it sends off the load request only, but doesn't wait till the image is loaded. So it is possible that the image isn't loaded when requested soon after.

jQuery.preloadImages = function () {
        for (var i = 0; i < arguments.length; i++) {
            jQuery("<img>").attr("src", arguments[i]);
        }
    }       
    $.preloadImages("img1.jpg","img2.jpg");

Answer 1

jQuery.preloadImages = function () {
  var image = new Image();

  for (var i = 0; i < arguments.length; i++) {
      image.src = arguments[i+1];
  }
}

I haven't tested.

Answer 2

Have you checked this discussion on SO :

http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery