0

選択ボックスのオプションに基づいて、外部ページの div から一部のコンテンツを div に読み込みます。多くの情報を含む div をロードするときに時間がかかる場合があることに気付きました。div がロードされている間にイメージローダー (gif) を作成する方法があると思いますか?

コンテンツをロードするために使用しているコードは次のとおりです。

$(document).ready(function(){ 
$("#select_box").change(function(){ 
    var selectedOption = $('#select_box :selected').val(); 
    $containerDiv = $('#div_where_content_loads_in'); 
            switch (selectedOption)
            {
                case "Option1":$containerDiv.load( "page.html#div1" ); break;
                case "Option2":$containerDiv.load( "page.html#div2" ); break;
                case "Option3":$containerDiv.load( "page.html#div3" ); break;
                case "Option4":$containerDiv.load( "page.html#div4" ); break;
           }
   }); 
});

いくつかのチュートリアルを見てきましたが、これについては助けが必要だと思います。ありがとう。

4

3 に答える 3

1

私は通常、show 関数と hide 関数を作成し、それらを ajax.load 関数で呼び出します。しかし、最近、ajaxStart および Stop イベントをリッスンできることに気付きました。まあ、それはあなたにとっては普通の生き方かもしれませんが、私には思い浮かびませんでした。とにかく、開始/停止イベントをリッスンし、jQuery で読み込み中のアニメーションを表示/非表示にするコードは次のとおりです。

$(document).ready(function () {
    $(document).ajaxStart(function () { showProgress() }).ajaxStop(function () { hideProgress() });
});

function showProgress() {
    $('body').append('<div id="progress"><img src="/images/loading.gif" alt="" width="16" height="11" /> Loading...</div>');
    $('#progress').center();
}

function hideProgress() {
    $('#progress').remove();
}

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}
于 2012-12-20T08:33:08.887 に答える
0

jQuery.load()2 番目の引数であるコールバック関数を受け取ります。これは、コンテンツの読み込みが完了すると実行されます。アイデアは、呼び出す前にスピナー$containerDiv.load()を表示し、コールバックで非表示にすることです。

あなたのhtmlが

<select id="select_box">
    <option value="foo">Load content from 'page.html #foo'</option>
    <option value="bar">Load content from 'page.html #bar'</option>
    <option value="foobar">Load content from 'page.html #foobar'</option>
    <option value="barfoo">Load content from 'page.html #barfoo'</option>
</select>

JavaScript は次のようになります。

$(document).ready(function() {
    var $containerDiv = $('#div_where_content_loads_in');
    var $spinner = $containerDiv.find('#spinner');
    $("#select_box").change(function() { // Called when user selects a value
        // Get the selected option
        // one of "foo", "bar", "foobar", "barfoo"
        var selectedOption = this.value;

        // Get the content URL
        // one of "page.html #foo", "page.html #bar",
        //        "page.html #foobar", "page.html #barfoo"
        var contentURL = "page.html #"+selectedOption;

        $spinner.show(); // Show the spinner before starting content load

        // Now that contentURL is the correct URL we want to load, call $.load
        $containerDiv.load( contentURL, function() {
            $spinner.hide(); // Hide the spinner when the content finished loading
        });
    });
});

switchステートメントも回避されていることに注意してください。spinnerこれは、コンテナーに id の要素が含まれ、 CSS で適切にスタイル設定され、スピナー gif が含まれていることを前提としています。

于 2012-12-20T08:34:54.610 に答える
0

これには ajaxStart 関数と .load 成功関数のコールバックを使用できます。

$(document).ready(function(){ 
   $("#select_box").change(function(){ 

     $(document).ajaxStart(function(){
       $('.loader').show();
     });

    var selectedOption = $('#select_box :selected').val(); 
    $containerDiv = $('#div_where_content_loads_in'); 
            switch (selectedOption)
            {
                case "Option1":
                    $containerDiv.load( "page.html#div1", function(){
                       $('.loader').fadeOut('fast');
                    }); 
                    break;
                case "Option2":
                    $containerDiv.load( "page.html#div2", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
                case "Option3":
                    $containerDiv.load( "page.html#div3", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
                case "Option4":
                    $containerDiv.load( "page.html#div4", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
           }
   }); 
});

これを試して、役立つかどうかを確認してください。

于 2012-12-20T08:41:08.477 に答える