javascript - Phpロード中のプリローダー

Question

ajaxを使用してphpファイルをロード中にプリローダーを追加したい。jqueryを使用することは可能ですか？ありがとうございました。

Answer 1

これを実現するには、jQuery.ajaxの引数を使用できます。プリローダーのコンテンツをマークアップとして設定し、CSSでデフォルトで非表示にしますが、クラスが追加されたときに表示されるようにします。

たとえば、プリローダーであるdivがあるとします。その中に「読み込み中」というメッセージがあります。CSS3を使用すると、クラス.preloaderから.preloader.showへの変更を自動アニメーション化できます。その後、これらのクラスをホルダーに追加したり、ホルダーから削除したりするだけです。

これはマークアップになります：

<div class="preloader">
    <h1>Loading...</h1>
</div>​

次に、CSS3が登場します。

    .preloader {
        /* written in CSS 3.0 */
        opacity: 0;
        font-size: 36px;

        -webkit-transition: 0.2s all;
         -khtml-transition: 0.2s all;
           -moz-transition: 0.2s all;
            -ms-transition: 0.2s all;
             -o-transition: 0.2s all;
                transition: 0.2s all;

        -webkit-transform: scale( 0.1 );
           -moz-transform: scale( 0.1 );
            -ms-transform: scale( 0.1 );
             -o-transform: scale( 0.1 );
                transform: scale( 0.1 );
    }
    .preloader.show {
        opacity: 1;

        -webkit-transition: 0.2s opacity;
           -moz-transition: 0.2s opacity;
            -ms-transition: 0.2s opacity;
             -o-transition: 0.2s opacity;
                transition: 0.2s opacity;

        -webkit-transform: scale( 1 );
         -khtml-transform: scale( 1 );
           -moz-transform: scale( 1 );
            -ms-transform: scale( 1 );
             -o-transform: scale( 1 );
                transform: scale( 1 );
    }

そして最後にjavascript：

$(function() {
    $.ajax({
        url: 'http://code.jquery.com/jquery-latest.js',
        dataType: 'script',
        beforeSend: function(evt) {
            if ( ! $('.preloader').is('.show') ) $('.preloader').addClass('show');
        },
        complete: function(jqXHR, textStatus) {
            // disable either here or at the end
            $('.preloader').removeClass('show');

            // handle error and success
        }
});

}）; </ p>

この例を@JSFiddleにアップロードしました。ソースは次のとおりです：http：//jsfiddle.net/8XP9r/15/

そしてこれがどのように見えるかです：http：//jsfiddle.net/8XP9r/15/embedded/result/

どうなるか教えて！XD

Answer 2

リクエストを開始すると、ロード内容を追加できます。コールバック関数を使用completeすると、読み込み中のものを削除できます。とてもシンプルです。これが例です。

function loadSomething(url) {
    showLoading();

    $.ajax(url).complete(function(data) {
        hideLoading();

        console.log(data);
    });
}

プリローダーの場所showLoading()と管理をそれぞれ行います。hideLoading()