jQuery的負載多張圖片後，他們都裝完

我有一個是被從一個onclick事件打了個比方功能jQuery的負載多張圖片後，他們都裝完

<a href="#" onclick="changeImages()">load new</a>

這個功能基本上改變了5張圖片是層疊在彼此的頂部：

function changeImages(){ 
    document.getElementById("ins5").src="image5.png"; 
    document.getElementById("ins4").src="image4.png"; 
    document.getElementById("ins3").src="image3.png"; 
    document.getElementById("ins2").src="image2.png"; 
    document.getElementById("ins1").src="image1.png";  
}

我想要的是當他們都加載時顯示LOADING動畫gif。一旦他們全部完成加載，然後淡入他們。我到處搜索，找不到任何可行的。

非常感謝！

來源

2012-03-08 Erika Danis

這並不有裝載機GIF，但它對於加載的圖像的監聽器您可以將淡出爲http://www.cirkuit.net/projects/jquery/onImagesLoad/ – 2012-03-08 20:20:45

輝煌！這個例子正是我一直在尋找的:)謝謝！ – 2012-03-09 09:40:33

使用jQuery來完成。您可以附加.load參數作爲回調函數。

function changeImages(){ 
    $("#ins5").prop('src','image5.png'); 
    $("#ins4").prop('src','image4.png'); 
    $("#ins3").prop('src','image3.png'); 
    $("#ins2").prop('src','image2.png'); 
    $("#ins1").prop('src','image1.png'); 
    $("#ins5, #ins4, #ins3, #ins2, #ins1").load(function(){ 
    //This is ourcallback. Once our images have loaded, we display an alert 
    alert("loaded!"); 
    }); 
}

來源

2012-03-08 20:27:54 Ohgodwhy

這可以作爲一種享受...但在圖像被緩存後停止工作。 – 2012-03-09 09:41:28

是的。這就是預期的功能。 – Ohgodwhy 2012-03-09 21:45:37