JavaScript: время до загрузки страницы

Question

Я пишу анимацию с помощью javascript и хочу печатать на время загрузки пользователя, пока все загруженные изображения не будут.

изображения, установленные в html как: <img src="" />

есть ли javascriptкод, чтобы знать, когда все страницы загружены? т.е. время до события onLoad (), вызываемого

Answer 1

Возможно, вы сможете сделать что-то подобное в нижней части страницы

<span id="imgsMsg"></span>
<script type="text/javascript">
var imgs = document.images;
var len = imgs.length;
var percent = 100;
var count=0;
var messagecontainer = document.getElementById("imgsMsg");
for (var i=0;i<len;i++) {
   imgs[i].onload=function() {
     count++;
     messagecontainer = (percent - Math.floor((100/len)*count))+"% loaded"; // hope my math is correct ;)
   }
}
</script>
</body>

Answer 2

Лучшее, что вы можете сделать, это отследить количество загруженных изображений и разделить их на общее количество оставшихся изображений. Примерно так:

var total_loaded = 0;
$('img').load(function()
{
    total_loaded += 1;
    var load_progress = total_loaded / $('img').length;
    // you can now use load_progress to show the user a rough progress animation
} );

Если вам нужен дисплей «оставшегося времени», вам нужно его подделать. Вы можете отследить общее прошедшее время и сравнить его с переменной load_progress, чтобы получить оставшееся время, например.

Answer 3

Это не сложно сделать с $(window).load:

var readytime = new Date().getTime();
$(window).load(function() {
    var loadingtime = (new Date().getTime() - readytime) / 1000; // in seconds

    $('#yourTimingField').text(loadingtime + ' seconds');
});

Измеряет время между этой частью скрипта и загрузкой всех подэлементов.