33

上部にナビゲーション バーがあり、ラッパー ボディがある基本的なページがあります。

ユーザーがナビゲーション リンクをクリックするたびに.load、ページ コンテンツをラッパー div にロードするために使用されます。

$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});
$(this).ajaxEnd(function(){$('progressbar').hide();});

$('.ajaxspl').on('click',function(e){
    e.preventDefault();

    var url=$(this).data('url'),
        wrap=$('body #wrap');

    //clean the wrapper
    wrap.slideUp().html('');

    //load page into wrapper
    wrap.load(url,function(){wrap.slideDown();});
});

からの戻り値の例.load:

<div>
...content
</div>
<script>$('.progressbar .bar').css('width','30%');</script>
<link href="/assets/css/datepicker.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','60%');</script>
<link href="/assets/css/main.css" rel="stylesheet" />
<script>$('.progressbar .bar').css('width','90%');</script>
<script>//blah blah</script>

ご覧のとおり、私は Bootstrap プログレス バーを表示しajaxstart()ています。呼び出したページでは、各項目がロードされた後にプログレス バーの値を変更しています。

これは Firefox ではうまく機能し、ページが読み込まれるのを待っている間にプログレス バーを確認できますが、Chrome や IE では機能しません。

これを行うより良い方法はありますか？これを正しく行っていますか、それとも別の方法がありますか?

たとえば、$.ajaxページ サイズを kb 単位で取得し、データを受信するとその場でプログレス バーを更新しますか?

Gmail が読み込まれているときに、読み込みページに似たものを作成しようとしています。

4

2 に答える 2

11

上記の答えは正しいです（賛成）。カスタム xhr リクエストはうまく機能します。コード (および実際の進行状況を確認するためのより大きなファイル) でテストしました。ここにコピーすることもできます。

$('.ajaxspl').on('click',function(e){
    e.preventDefault();

    var url=$(this).data('url'), wrap=$('body #wrap');

    //clean the wrapper
    wrap.slideUp().html('');

    //load page into wrapper
    console.log('starting ajax request');
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
                }
            });
            return xhr;
        }, 
        type: 'POST', 
        url: url, 
        data: {}, 
        complete: function(response, status, xhr) {
            console.log(response)
            wrap.html(response.responseText);
            wrap.slideDown();
        }
    });

});
于 2013-03-19T11:47:48.197 に答える