jQuery的圖像加載

我有這樣的代碼：jQuery的圖像加載

<div id="gallery"> 
    <img src="image1.jpg"> 
    <img src="image2.jpg"> 
    <img src="image3.jpg"> 
</div>

我想說明的標準（用於Ajax請求），動畫GIF圖片時加載，當它的加載顯示完整的圖像。

只有1個要求，即要保持當前的標記，並盡一切所需要的操作在獨立的腳本塊的onload

來源

2011-12-18 Sergey Sypalo

我認爲你可以使用ajaxStart和ajaxComplete事件（jQuery的）

<div id="indicator"><img src="/path/to/your/image.gif"/></div>

而且

$("#indicator").bind("ajaxStart", function(){ 
    $(this).show(); 
}); 

$("#indicator").bind("ajaxComplete", function(){ 
    $(this).hide(); 
});

當您使用$ .ajax或$ .post時，它會自動顯示並隱藏加載程序，同時ajax請求啓動並停止。

或者如果您使用XmlHttpRequest，則可以基於readyState的XmlHttpRequest對象來設置指示圖像。

例如：

xmlHttp.onreadystatechange=function(){ 
    if (xmlHttp.readyState==4){ 
     document.getElementById("yourDiv").innerHTML=xmlHttp.responseText; 
    }else if(xmlHttp.readyState==3){ 
     document.getElementById("yourDiv").innerHTML="<img src='loader.gif' />Loading..."; 
    } 
}

與readyState的爲：