한 페이지 웹 사이트에서 jquery ajax를 사용하여 페이지를 로드하는 동안 진행 표시줄 표시

한 페이지 웹 사이트에서 jquery ajax를 사용하여 페이지를 로드하는 동안 진행 표시줄 표시

네비게이션 바가 있는 기본 페이지와 래퍼 본체가 있습니다.

사용자가 사용하는 탐색 링크를 클릭할 때마다.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>

보시는 바와 같이 부트스트랩 진행 표시줄이 있습니다.ajaxstart()각 항목이 로드된 후 호출하는 페이지에서 진행 표시줄의 값을 변경합니다.

Firefox에서는 정상적으로 동작하며 페이지가 로드되기를 기다리는 동안 진행 표시줄을 볼 수 있지만 Chrome 또는 IE에서는 작동하지 않습니다.

더 좋은 방법이 있을까요?제대로 하고 있는 건가요, 아니면 다른 방법이 있나요?

예를 들면,$.ajax데이터 수신 시 페이지 크기(KB)와 진행률 표시줄을 즉시 업데이트해야 합니까?

Gmail을 로드할 때 Loading 페이지와 비슷한 것을 제작하려고 합니다.

이 페이지를 참조할 수 있습니다.이 페이지에서는, 어떻게 하면, 유저를 추가할 수 있는지가 기술되어 있습니다.progress eventjquery에서 xhr 오브젝트의 리스너(이러한 브라우저에서만 동작하며 오래된 브라우저에서는 현재 사용하고 있는 것과 동일한 베이스에 의존합니다)를 사용합니다.

참고로 아래의 관련 코드를 복사했습니다('다운로드 진행' 부분에만 관심이 있을 것입니다).

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

단, 이것은 한 페이지 웹 사이트에는 너무 많은 과잉이며 큰 파일에만 유용합니다.또한 이미지 및 유사한 미디어는 이러한 방식으로 처리되지 않으므로 이러한 시스템을 완벽하게 만들려면 이미지 로드를 모니터링(또는 Ajax를 통해 직접 수행)해야 합니다.

다음은 이를 보여주는 JSFiddle입니다.http://jsfiddle.net/vg389mnv/1/

위의 답변은 정확합니다(업투표).커스텀 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();
        }
    });

});

언급URL : https://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-website