How to load an image asynchronously?

I'm loading an image onto a texture map with GLGE (sorta like webGl). However for the sake of loading speed I'm loading a low resolution image first (which would be quicker) and then want to change the src to the high resolution image once the large image is loaded. This is what I'm doing now

var textu开发者_StackOverflow社区re =  new GLGE.texture();
function updateTexture(){
    var image=new Image();
    image.src = "models/testLargeMap_map0.jpg"; // load image

    image.onload = function(){
        texture.image("models/testLargeMap_map0.jpg"); // supposedly swap image on load (not working as I thought)
    }   
}

However, when during this period of changing the src, the model and all its functions freeze. How do I make it load the image asynchronously and on load swap it to the higher texture for a smooth instantaneous texture change?

You can set an image.onload event handler like this:

var big_image = new Image();
big_image.onload = function () {
    texture.image("models/testLargeMap_map0.jpg");
}
big_image.src = "models/testLargeMap_map0.jpg";

(Note that I set the onload handler first, then set the src attribute. If I do it the other way around, it fails in IE).

This will preload the image before calling texture.image. I don't know anything about this library though, so I can't be certain it will use the pre-loaded image.

The image.src will be requesting the image from the server and it will initiate the onload event, and again u are requesting the image to be swapped so it is getting freezed. Why do you need this approach. You can have better way of doing this like, allow the low resolution image to be loaded first then assign the onmouseover or onclick event for the image on that time u can show a popup like shown on google images and then in it just display the high resolution images. On that time u will be requesting a single image the process will be quicker. Hope this helps you

I'm not familiar with "GLGE" but it looks like the problem is that the method .image() loads the image again (kind regardless if that happens in the load event handler for the same image).

So unless you can set the image reference directly, like

texture = this; // within the load handler

there is no way to accomplish it with this library.