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的为：