如何异步加载图像？

我正在将图像加载到具有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，模型和它的所有功能冻结时。我如何使它异步加载图像，并在加载时将其交换到较高纹理以实现平滑瞬时纹理更改？

来源

2011-08-24 deztructicus

而不是使用'image.onload'，你可以尝试'$（document）.ready（）'在这里完成：http://stackoverflow.com/questions/1339901/stop-loading-of-images-with -javascript，lazyload – JMax

您可以设置一个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之前预加载图像。我对这个图书馆一无所知，所以我不能确定它会使用预加载的图像。

来源

2011-08-24 10:02:05

image.src将从服务器请求图像，它将启动onload事件，并且再次请求图像进行交换以便它被冻结。你为什么需要这种方法。你可以有更好的方式来做到这一点，先让低分辨率图像加载，然后为图像分配onmouseover或onclick事件，你可以在google图像上显示一个弹出窗口，然后显示高分辨率图像。那时候你会要求一张图像，这个过程会更快。希望这有助于你

来源

2011-08-24 10:01:10 AmGates

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

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

texture = this; // within the load handler

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

来源

2011-08-24 10:01:59 jAndy

如何异步加载图像？

回答

相关问题