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');
});

它测量脚本的这一部分与所有子元素的加载之间的时间量。

javascript：页面加载的时间

3 个答案: