Question

如何查看窗口加载进度？我知道页面完全加载时会有一个jquery事件，但我也希望能够跟踪其加载进度的百分比。

像（只是伪代码）

$(window).load_change(function(){
    set_progress_bar(window.load_percentage);
});

这将获得页面加载的进度并相应地更改进度条。

这可能吗？

Answer 1

要查看加载了多少DOM，您可以战略性地检查页面上是否存在元素。以下帖子是这样做的一个很好的参考，但只是有一个你要检查的元素的ID数组，然后使用setTimeout()每200ms调用一次更新函数应该可以让你看到有什么已加载并相应更新进度条。

How to check if element exists in the visible DOM?

Answer 2

正如Hanlet所提到的，有一些共同的场景可以使用：

您有一个网站，而且您的网页上有很多图片;
你有一个网络应用程序，你的页面有很多进程或ajax请求;或
两个

对于数字1，我看到人们使用图像预加载器有两个主要好处，首先是当页面加载时，所有图像只是那里，其次是图像是通常是页面加载的较重部分，因此对它们的基本百分比计算几乎可以说明它。一个简单的javascript图像预加载器算法将循环遍历文档上的每个img标记并创建一个Image对象，在将其插入页面之前设置其src属性。

对于数字2，我会像这样制作一个像观察者一样的 Progress对象：

var Progress = {
    processes:{},
    // Adds a process to keep track on
    addProcess:function(name){
        this.processes[name] = false; // false for non-completed
    },
    // Sets a process as completed, calls redrawProgress
    setCompleted:function(name){
        this.processes[name] = true;
        this.redrawProgress();
    },
    redrawProgress:function(){ /* Updates the progress bar */ }
};

然后，在每个流程中，您应该使用Progress.addProcess('myprocessname');在进度条中注册它，并在完成时调用Progress.setCompleted('myprocessname');。

对于3号，我会尝试某种方式来了解所有页面的请求（包括图像，ajax数据请求，外部javascript调用和其他进程），并将其与Progress对象解决方案的数量混合2，但我从未尝试过这个。

如何检查pageload的进度？

2 个答案: