jQueryでページの読み込み率をパーセント表示でカウントアップしたい

投稿者: Anonymous

質問させてください。タイトルの通りです。jQueryでページのローディングをつくっています。読み込み率をパーセント表示でカウントアップ、100%読み込まれたらメインコンテンツを表示させるものを想定しています。サンプルなどを参考に、事前に用意しておいた画像をpreloadで読み込んでその進捗率を取得する方法で実装できたのですが、事前に用意しておいた画像ではなく読み込もうとしているページ全体の読み込み進捗率を取得したいです。setTimeoutで取得する方法はいくらでもあると思うのですが、リアルな読み込み率を表示したいです。よろしくお願いいたします。

_x000D_

_x000D_

$(function() {_x000D_
  Array.prototype.remove = function(element) {_x000D_
    for (var i = 0; i < this.length; i++)_x000D_
      if (this[i] == element) this.splice(i, 1);_x000D_
  };_x000D_
_x000D_
  function preload(images, progress) {_x000D_
    var total = images.length;_x000D_
    $(images).each(function() {_x000D_
      var src = this;_x000D_
      $('<img/>')_x000D_
        .attr('src', src)_x000D_
        .load(function() {_x000D_
          images.remove(src);_x000D_
          progress(total, total - images.length);_x000D_
        });_x000D_
    });_x000D_
  }_x000D_
  var now_percent = 0;_x000D_
  var displaying_percent = 0;_x000D_
  preload([_x000D_
    'img/DSC00001.png',_x000D_
    'img/DSC00002.png',_x000D_
    'img/DSC00003.png',_x000D_
    'img/DSC00004.png',_x000D_
    'img/DSC00005.png'_x000D_
  ], function(total, loaded) {_x000D_
    now_percent = Math.ceil(100 * loaded / total);_x000D_
  });_x000D_
  var timer = window.setInterval(function() {_x000D_
      if (displaying_percent >= 100) {_x000D_
        window.clearInterval(timer);_x000D_
        $('#loader').fadeOut('slow', function() {_x000D_
          $('<img />')_x000D_
            .attr('src', 'img/DSC00001.png')_x000D_
            .appendTo('#content');_x000D_
          $('#content').fadeIn('slow');_x000D_
_x000D_
        });_x000D_
      } else {_x000D_
        if (displaying_percent < now_percent) {_x000D_
          displaying_percent++;_x000D_
          $('#load-text').html(displaying_percent + '%');_x000D_
          $('#bar span').css('width', displaying_percent + '%');_x000D_
        }_x000D_
      }_x000D_
    },_x000D_
    5);_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="loader"><span id="load-text">0%</span></div>_x000D_
<div id="content" style="display: none;"></div>

_x000D_

_x000D_

_x000D_

解決

以下の例では、jQueryの$.getの結果をコールバック関数で受け取り、進捗を$('#load-text')に表示します。
また、$.getの戻り値を、Promise.allで梱包することで、全ての結果を.thenで受け取ります。resultsには$.getdataが配列で格納されています。

https://jsfiddle.net/59naga/0umg1L2g/1/

https://cdn.jsdelivr.net/bluebird/3.0.5/bluebird.jsPromise.allのポリフィルです。

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
  <meta charset="UTF-8">_x000D_
  <title>Document</title>_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>_x000D_
  <script src="https://cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>_x000D_
<script>_x000D_
$(function(){_x000D_
  var urls= [_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
    'https://code.jquery.com/jquery-1.11.3.js',_x000D_
  ]_x000D_
_x000D_
  var i= 0_x000D_
  var $loadText= $('#load-text')_x000D_
  var $content= $('#content')_x000D_
  var promises= urls.map(function(url){_x000D_
    return $.get(url)_x000D_
    .then(function(data){_x000D_
      var percent= Math.floor(((1+ i++) / urls.length) * 100)+'%'_x000D_
_x000D_
      $loadText.text(percent)_x000D_
_x000D_
      return data;_x000D_
    })_x000D_
  })_x000D_
_x000D_
  Promise.all(promises)_x000D_
  .then(function(results){_x000D_
    $loadText.text('')_x000D_
_x000D_
    $content.html('<img src="http://uds.gnst.jp/rest/img/4un05dt10000/s_0039.jpg?t=1384328438" alt="done"/>')_x000D_
    $content.fadeIn('slow')_x000D_
  })_x000D_
})_x000D_
_x000D_
</script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div id="loader"><pre id="load-text">0%</pre></div>_x000D_
<div id="content" style="display: none;"></div>_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

参考

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *