16

私は現在このコードを持っていますが、それは非常に簡単です

$('#window').load('http://mysite.com/mypage.php');

ただし、完全にロードされた後にのみコンテンツが表示され、その間 #windows 要素は空のままです。ページが読み込まれるまで読み込み中の画像を表示したい。どうすればいいですか？jquery サイトでは、それについて何も説明されていません。（私の知る限り）

4

5 に答える 5

20

loading最初に divを作成します。

 <div id='loadingDiv'>
    Please wait...  <img src='path to your super fancy spinner' />
 </div>

最初はこの DIV を非表示にし、コードを添付して ajaxCall の開始時にこの div を表示し、ajax 呼び出しの完了時にこれを非表示にします。 

$('#loadingDiv').hide().ajaxStart( function() {
$(this).show();  // show Loading Div
} ).ajaxStop ( function(){
$(this).hide(); // hide loading div
});

編集
少し前に SO フォーマットタグに問題がありました。それらを再度追加しました。

于 2012-06-06T12:20:52.400 に答える
7

この目的のために、gif 画像を使用する必要があります。まずはコンテンツが読み込まれるまで #window のhtmlをgif画像に変更

作業コード

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php');
于 2012-06-06T12:09:04.117 に答える
3

数ミリ秒以上かかる可能性があることがわかっている非同期リクエストについては、Spin.jsを使用します。これには外部依存関係がなく、ブラウザー間の互換性があります。

var opts = {
  lines: 13, // The number of lines to draw
  length: 10, // The length of each line
  width: 4, // The line thickness
  radius: 11, // The radius of the inner circle
  rotate: 0, // The rotation offset
  color: '#000', // #rgb or #rrggbb
  speed: 0.6, // Rounds per second
  trail: 32, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};

var target, spinner;

$(function(){
    target = $('#window').get(0);
    spinner = new Spinner(opts);
    spinner.spin(target);
    setTimeout(function(){
        spinner.stop();
        $(target).html("Loading finished.");
    }, 3500);
});

fiddle http://jsfiddle.net/y75Tp/73/を参照してください(verbumSapienti のおかげで更新)

于 2012-06-06T12:22:01.270 に答える