如何异步加载图片？

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期间，模型及其所有功能都会冻结。我该如何异步加载图像，并在加载完成后将其切换到更高质量的纹理，以实现平滑的瞬时纹理变化？

- Zeeno

---

不要使用image.onload，你可以尝试使用$(document).ready()，就像这里的例子一样：https://dev59.com/mEnSa4cB1Zd3GeqPKxW4 - JMax

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

- Ben Lee

Answer 2

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

因此，除非您可以直接设置图像引用，例如

texture = this; // within the load handler

使用这个库无法完成它。

- jAndy

Answer 3

image.src 将从服务器请求图像并启动 onload 事件，然后再次请求要交换的图像，因此它被冻结了。为什么需要这种方法？你可以有更好的做法，例如，先允许加载低分辨率图像，然后在该时间为图像分配 onmouseover 或 onclick 事件，就像 Google 图像上显示的弹出窗口那样，然后在其中只显示高分辨率图像。此时，您将请求单个图像，进程将更快。

希望这可以帮助你。

- AmGates