0

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

$(function() {
  Array.prototype.remove = function(element) {
    for (var i = 0; i < this.length; i++)
      if (this[i] == element) this.splice(i, 1);
  };

  function preload(images, progress) {
    var total = images.length;
    $(images).each(function() {
      var src = this;
      $('<img/>')
        .attr('src', src)
        .load(function() {
          images.remove(src);
          progress(total, total - images.length);
        });
    });
  }
  var now_percent = 0;
  var displaying_percent = 0;
  preload([
    'img/DSC00001.png',
    'img/DSC00002.png',
    'img/DSC00003.png',
    'img/DSC00004.png',
    'img/DSC00005.png'
  ], function(total, loaded) {
    now_percent = Math.ceil(100 * loaded / total);
  });
  var timer = window.setInterval(function() {
      if (displaying_percent >= 100) {
        window.clearInterval(timer);
        $('#loader').fadeOut('slow', function() {
          $('<img />')
            .attr('src', 'img/DSC00001.png')
            .appendTo('#content');
          $('#content').fadeIn('slow');

        });
      } else {
        if (displaying_percent < now_percent) {
          displaying_percent++;
          $('#load-text').html(displaying_percent + '%');
          $('#bar span').css('width', displaying_percent + '%');
        }
      }
    },
    5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<div id="loader"><span id="load-text">0%</span></div>
<div id="content" style="display: none;"></div>

1 件の回答 1

1

以下の例では、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のポリフィルです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>
<script>
$(function(){
  var urls= [
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
    'https://code.jquery.com/jquery-1.11.3.js',
  ]

  var i= 0
  var $loadText= $('#load-text')
  var $content= $('#content')
  var promises= urls.map(function(url){
    return $.get(url)
    .then(function(data){
      var percent= Math.floor(((1+ i++) / urls.length) * 100)+'%'

      $loadText.text(percent)

      return data;
    })
  })

  Promise.all(promises)
  .then(function(results){
    $loadText.text('')

    $content.html('<img src="http://uds.gnst.jp/rest/img/4un05dt10000/s_0039.jpg?t=1384328438" alt="done"/>')
    $content.fadeIn('slow')
  })
})

</script>
</head>
<body>

<div id="loader"><pre id="load-text">0%</pre></div>
<div id="content" style="display: none;"></div>

</body>
</html>

参考

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。