Question

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 texture =  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?

Answer 1

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.