18529


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

[code]

    $(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);
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2015-11-07T08:00:31.943
18510
2019-12-13T18:37:39.050
2019-12-13T18:37:39.050
32986
10441
question
javascript
jQueryでページの読み込み率をパーセント表示でカウントアップしたい


以下の例では、jQueryの`$.get`の結果をコールバック関数で受け取り、進捗を`$('#load-text')`に表示します。  
また、`$.get`の戻り値を、[Promise.all](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)で梱包することで、全ての結果を`.then`で受け取ります。`results`には`$.get`の`data`が配列で格納されています。

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

> `https://cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js`は`Promise.all`のポリフィルです。
[code]

    <!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>
[/code]

> 参考

  * [2.8. Promise.all - JavaScript Promiseの本](http://azu.github.io/promises-book/#ch2-promise-all)


CC BY-SA 3.0
2015-11-07T18:58:40.693
18529
2015-11-07T18:58:40.693
9834
18510
answer