jquery - ページの更新時に読み込み中の画像を表示する

Question

誰かが特定のリンクをクリックすると、.reload(true) を使用してページを強制的にリロードする JavaScript スニペットがあります。ページの更新中に単純な「読み込み中」の画像を表示するにはどうすればよいですか?

（それが役立つ場合は、ページですでにjqueryを使用しています）

Answer 1

jquery-loadmask プラグインを確認する

Answer 2

読み込み中の画像が必要な場所を指定しませんでした。画像自体を読み込み中の画像にしたい場合は、画像を次のように装飾することから始めます。

<img class="cl"
     src="loading.gif"
     onload="if(!this._done){this._done=true;this.src='real.jpg';}"/>

次に、 を呼び出す前に、次のこと.reloadを行います。

$('img.cl').attr('src','loading.gif');

一方、固定の場所に配置したい場合は、単純にそうしますが、次のようにその div を非表示としてマークします。

<div id="rl">loading <img src="loading.gif"/></div>
<noscript><style>
#rl {display:none;}
</style></noscript>
<script><!--
document.write("<style>\ndiv#rl {display:block;}\n</style>");
$('#rl').hide();
//--></script>

(おそらく、rl をどこかに配置することもあるでしょう)

次に、reload を呼び出す前に、単純に再表示します。

$('#rl').show();