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事件，您可以显示谷歌图像上显示的弹出窗口，然后在其中显示高分辨率图像。在那个时候，你将要求一个图像，这个过程会更快。希望这可以帮助你

Answer 3

我不熟悉“GLGE”，但看起来问题是方法.image()再次加载图像（无论是否在同一图像的加载事件处理程序中发生，都会有种类）。

因此，除非您可以直接设置image reference，例如

texture = this; // within the load handler

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

如何异步加载图像？

3 个答案: