如何異步加載圖像？

我正在將圖像加載到具有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

如何異步加載圖像？

回答

相關問題