如何異步加載圖像？

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

沒有辦法用這個庫完成它。