jquery要素がロードされている間に画像をロードする

Question

要素が読み込まれている間に読み込み中のGIFを挿入するチュートリアルや記事を探しています。私は画像をプリロードすることについての記事しか見つけられないようです。

Answer 1

一般的な戦略は、読み込みイメージをdivタグまたはspanタグに配置し、表示するときに表示または非表示にすることです。最初に表示したい場合は、jQuery .hide（）関数をjQuery on ready関数のdivまたはspanに配置するだけです。

はjQuery docs on show() and hide()

Answer 2

はあなたがやろうとしている内容に応じて、それは特に難しいことではありませんを参照してください。以下は、（既存の）読み込みイメージを表示し、ajax経由で取得したhtmlを読み込み、読み込みが完了すると読み込みイメージを非表示にします。画像データが実際にダウンロードされる前に、ロード・コールバックが呼び出されるので、データをロードする場合

$(function() { 
    $('#activate').click(function() { 
     $('#loadingImg').show(); 
     $('#whereItGoes').load('url-to-data-to-be-loaded', function() { 
      $('#loadingImg').hide(); 
     }); 
    }); 
}); 

はイメージです、それは少しトリッカーを取得します。その場合の戦略の1つは、いくつの画像を読み込むかを知っているHTMLにスクリプトを組み込み、すべての画像がダウンロードされるまで基本的に画像カウントをチェックするonloadedイベントハンドラを持つことです。私は通常、画像データが利用可能になる前にonloadedハンドラが追加されない場合にタイムアウトを設定します（その場合は起動しません）。

Answer 3

これは、通常よりも多くの何もない：

function onAGivenEvent() { 
    $('someContain').append('<div id="throbber"></div>'); 
    // do some slowthings with a "on complete callback to onComplete 
} 

function onComplete() { 
    $('#throbber').remove(); 
} 

しかし、あなたも、Javascriptを必要としない場合もあります。例えば、大きな画像の場合。その場合、あなたは、HTMLやCSSを使用してそれを行うことができます。

img.largeImage { 
    background: url(throbber.gif) center no-repeat; 
} 

とHTMLで

<img class="largeImage" src="..." /> 

Answer 4

あなたがここにローダーのGIFを生成することができますhttp://www.ajaxload.info/

Answer 5

はこれを行うための最も簡単な方法があります表示または非表示を使用せずに表示または非表示を使用することは、実際には必要でないローディングイメージを配置した場所にdivを作成する必要があることを意味します。これは、あなたがこれを実行したら、あなたが表示または非表示を使用するので、あなたが他の追加のdivを追加し、それを隠すためにCSSを使用する必要はありません

<a href="mypage.php" rel="charger">Load Page 1</a> 

<div id="LoadMe">LoadMe div</div> 

<script> 


    $('a[rel*=charger]').click(function() { 

    $('#LoadMe').html('<img src="images/facebook_style_loader.gif" />'); 

    $('#LoadMe').load($(this).attr('href')); 



    return false; 
}); 




</script> 

方法です。また、これは読み込みイメージがロードされる場所に正確に表示されますが、読み込みたいページにたくさんのものがある場合は、表示と非表示が常に正しい場所に表示されるとは限りません。 それが役に立ったと思っています。