如何异步加载图像？答案

【问题标题】：How to load an image asynchronously?如何异步加载图像？
【发布时间】：2011-08-24 18:02:05
【问题描述】：

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

【问题讨论】：

不使用image.onload，您可以尝试$(document).ready()，如下所示：stackoverflow.com/questions/1339901/…

标签： javascript image asynchronous

【解决方案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 handler，然后设置了src属性，反之则在IE中失败）。

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

【讨论】：

【解决方案2】：

image.src 将向服务器请求图像，它会启动 onload 事件，你再次请求交换图像，因此它被冻结。为什么需要这种方法。您可以有更好的方法来执行此操作，首先允许加载低分辨率图像，然后为图像分配 onmouseover 或 onclick 事件，然后您可以显示像谷歌图像上显示的弹出窗口，然后在其中显示高分辨率图像。那时您将请求单个图像，该过程会更快。希望对你有帮助

【讨论】：

【解决方案3】：

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

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

texture = this; // within the load handler

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

【讨论】：