-load()編-jQueryのローディングサンプルを作っていたら長くなってしまったのでhtmlファイル読み込み時のローディング処理とxmlファイルを読み込む際のローディング処理の二回に別けて記事を書きたいと思います。ローディングはサーバーサイドのプログラムやFlashと違い使う機会は限られますが覚えておいて損はないかと思います。今回は非同期通信(jQueryのload()利用)でhtmlファイルを読み込む際のローディングサンプルの紹介です。ボタンをクリックしたらhtmlファイルを読み込むという作りにします。htmlの読み込みが完了するまでの間にローディング画像を表示させます。2種類のhtmlファイルを用意します。1つ目は読み込み元となる親ファイル、もう1つは読み込むファイルです。読み込むhtmlファイルは何でもよいので今回は特に解説しません。あと、注意しておくとload()で読み込めるのはhtmlファイルだけになります。xmlやphp等のデータを読み込む際には$.getや$.postになります。none;)にしておきます。id="pics"></div>次にスクリプトの説明です。one()は一度だけ実行する場合に使います。同じファイルを何度も読み込むことはないので今回はone()を使い、id「button」を一度だけクリックしたらというイベント処理にしました。{そしてクリック後のコールバック関数で以下の処理を行ないます。$("#loading").show();まずローディング画像をshow()で表示させます。ローディングを表示させたら、ID「pics」の要素内にload()でtest.htmlを挿入します。読み込みが完了したらコールバック関数で、ローディングをフェードアウトさせます。{$("#pics").show();});});以上でhtmlファイルのローディング処理が完了です。ちなみに以下の2行を消すとクリックをしなくても、親ファイルの読み込みのタイミングでローディング→test.htmlファイルの読み込みが発生します。コメントをキャンセルメールアドレスが公開されることはありません。