Skip to main content
本文に 40 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

https://jsfiddle.net/f11c378e/

$(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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>
$(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>
</head>
<body>
<div id="loader"><span id="load-text">0%</span></div>
<div id="content" style="display: none;"></div>
</body>
</html>
 

https://jsfiddle.net/f11c378e/

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>
$(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>
</head>
<body>
<div id="loader"><span id="load-text">0%</span></div>
<div id="content" style="display: none;"></div>
</body>
</html>

$(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>
 

本文に 34 文字追加
ソース リンク
ソース リンク

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

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>
$(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>
</head>
<body>
<div id="loader"><span id="load-text">0%</span></div>
<div id="content" style="display: none;"></div>
</body>
</html>