jqueryの画像負荷

Question

私はこのようなコードを持っている：

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

私は絵がロードしたときに、それがショーの完全な画像をロードしていますされている間（AJAX要求のための）標準のアニメーションGIFを示したいと思います。

現在のマークアップを維持したいと別のスクリプトブロック内のonloadのために必要なすべての操作を行うだけ1要件

Answer 1

私はあなたが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のを使用している場合、あなたはインジケータ画像を設定するには、XMLHttpRequestオブジェクトのreadyStateのに基づくことができます。例えば

：

• 0未初期化：初期値としてのreadyStateと

  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..."; 
      } 
  } 
  

  。

• 1オープン：open（）メソッドが正常に呼び出されました。送信
• 2：UAは要求を正常に完了したが、データはまだ受信されていません。
• 3は、受信：直ちにメッセージ本文（もしあれば）を受信する前に。すべてのHTTPヘッダーが受信されました。

ソース：http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/

Answer 2

このリンクは役に立つかもしれません：http://jqueryfordesigners.com/image-loading/