javascript - 如何异步加载图像？

Question

我正在使用 GLGE(有点像 webGl)将图像加载到纹理贴图上。然而，为了加载速度，我首先加载低分辨率图像(这样会更快)，然后在加载大图像后将 src 更改为高分辨率图像。这就是我现在正在做的

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)
    }   
}

但是，在更改 src 期间，模型及其所有功能会卡住。我如何让它异步加载图像并在加载时将其交换到更高的纹理以实现平滑的瞬时纹理变化？

Answer 1

您可以像这样设置一个 image.onload 事件处理程序:

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

(请注意，我先设置 onload 处理程序，然后设置 src 属性。如果我反过来设置，在 IE 中会失败)。

这将在调用 texture.image 之前预加载图像。不过我对这个库一无所知，所以我不能确定它会使用预加载的图像。