web-dev-qa-db-ja.com

ページ読み込みの進捗状況の割合を計算して表示する

最初にページが読み込まれるときに読み込まれるローダーがあります。完了率を表示する必要があります。

私のアプリケーションには多くのjqueryとcssが含まれており、ajax呼び出しも含まれています。

今のところ、ページの読み込みが開始されると進行状況バーが表示され、ajaxが正常に完了すると非表示になっています。

また、パーセンテージを表示しましたが、以下のコードを使用して手動で増やしました：

function timeout_trigger() {
    $(".progress").css("max-width", p + "%");
    $(".progress-view").text(p + "%");
    if (p != 100) {
        setTimeout('timeout_trigger()', 50);
    }
    p++;
}
timeout_trigger();

ここでの問題は、進行状況が100に達する前にページがロードされてコンテンツが表示されるため、ローダーが非表示になります（例：60％）-ローダーが非表示になります。

ページの読み込み完了のパーセンテージ（つまり、jqueryの読み込み時間、CSSの読み込み時間など）を動的に計算し、それに応じて進行状況を増やしたい。

これを乗り越えるのを手伝ってください。

javascriptjqueryhtmlcssajax
7
user3211705
_function timeout_trigger() {
   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 50);
   }
   p++;
}
timeout_trigger();
_

このコードは、ダウンロードが速くなる場合-失敗する場合、50msごとに1％をダウンロードする場合にのみ機能します。

それはこのようなものでなければなりません：

_var size = file.getsize(); // file size

function timeout_trigger() {
   var loaded = file.getLoaded(); // loaded part
   p = parseInt(loaded / size);

   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 20);
   }
}
timeout_trigger();
_

メソッドgetLoaded()を実現するには、AJAX event onprogressを使用できます（ファイルを非同期でロードしていることを願っています）。チェック進捗状況の監視ここに https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

7
Andrew Evt

あなたはこれを使うことができます：

ソース： ページ全体がロードされる前にロードバーを表示します

スクリプト

<script>
        ;(function(){
          function id(v){ return document.getElementById(v); }
          function loadbar() {
            var ovrl = id("overlay"),
                prog = id("progress"),
                stat = id("progstat"),
                img = document.images,
                c = 0,
                tot = img.length;
            if(tot == 0) return doneLoading();

            function imgLoaded(){
              c += 1;
              var perc = ((100/tot*c) << 0) +"%";
              prog.style.width = perc;
              stat.innerHTML = "Loading "+ perc;
              if(c===tot) return doneLoading();
            }
            function doneLoading(){
              ovrl.style.opacity = 0;
              setTimeout(function(){ 
                ovrl.style.display = "none";
              }, 1200);
            }
            for(var i=0; i<tot; i++) {
              var tImg     = new Image();
              tImg.onload  = imgLoaded;
              tImg.onerror = imgLoaded;
              tImg.src     = img[i].src;
            }    
          }
          document.addEventListener('DOMContentLoaded', loadbar, false);
        }());
    </script>

HTML（本文の最初または最後）

<div id="overlay">
            <div id="progstat"></div>
            <div id="progress"></div>
        </div>

[〜＃〜] css [〜＃〜]

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;
  top:50%;
  transition: 1s;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}
11
Anshul Mishra