如何异步加载镜像？

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之前预加载图像。我对这个库一无所知，所以我不能确定它是否会使用预加载的镜像。

Answer 2

image.src将从服务器请求映像，它将启动onload事件，并且您再次请求交换映像，因此它将被冻结。为什么你需要这种方法。你可以有更好的方法这样做，首先允许低分辨率图像被加载，然后为图像分配onmouseover或onclick事件，此时你可以显示一个弹出窗口，就像在google图像上显示的那样，然后在其中只显示高分辨率图像。在这个时候，你将请求一个单一的图像，过程将会更快。希望这能对你有所帮助

Answer 3

我不熟悉"GLGE“，但看起来问题在于.image()方法再次加载图像(不管是否在同一图像的load事件处理程序中发生这种情况)。

所以除非你可以直接设置image reference，比如

texture = this; // within the load handler

没有办法用这个库来完成它。