質問させてください。タイトルの通りです。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>