javascript - 如何查看页面加载进度？

Question

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

类似的东西（只是伪代码）

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

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

这可能吗？

Answer 1

要查看加载了多少 DOM，您可以策略性地检查页面上存在的元素。以下帖子是这样做的一个很好的参考，但只需拥有一个您想要检查的元素的 ID 数组，然后使用setTimeout()它每 200 毫秒调用一次更新函数或其他东西应该可以让您查看已加载的内容并更新您的相应的进度条。

如何检查可见DOM中是否存在元素？

Answer 2

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

1. 你有一个网站，你的页面有很多图片；
2. 您有一个 Web 应用程序，并且您的页面有很多进程或 ajax 请求；或者
3. 两个都。

对于第一点，我看到人们使用图像预加载器有两个主要好处，首先是当页面加载时，所有图像都会在那里，其次是图像通常是页面加载的较重部分，所以对这些的基本百分比计算几乎可以说明这一点。一个简单的 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 中的对象解决方案混合，但我从未尝试过这个.