Javascript 页面加载状态

Javascript 页面加载状态,javascript,jquery,html,browser,Javascript,Jquery,Html,Browser,有没有办法知道浏览器加载页面的距离 通过使用JavaScript或浏览器本机函数 根据页面状态,我想构建进度条。您必须自己确定进度条,要做到这一点,您必须有一种方法来确定进度条。一种可能是在页面上有虚拟元素,知道它们的总数,并在每个点上计算已经存在的元素的数量。但这只会给您提供所获得的DOM数量,而这可能只是加载时间的一小部分-通常情况下,浏览器在等待脚本和图像时处于空闲状态。我不能100%确定这是否可行,但是。。理论是这样的: 首先,在页面加载之前不要停止JavaScript的运行。也就是说,

有没有办法知道浏览器加载页面的距离

通过使用JavaScript或浏览器本机函数


根据页面状态,我想构建进度条。

您必须自己确定进度条,要做到这一点,您必须有一种方法来确定进度条。一种可能是在页面上有虚拟元素,知道它们的总数,并在每个点上计算已经存在的元素的数量。但这只会给您提供所获得的DOM数量,而这可能只是加载时间的一小部分-通常情况下,浏览器在等待脚本和图像时处于空闲状态。

我不能100%确定这是否可行,但是。。理论是这样的:

首先,在页面加载之前不要停止JavaScript的运行。也就是说,不要使用window.ready document.ready等

在页面顶部初始化一个名为loaded或其他的JavaScript变量,并将其设置为0

var加载=0

遍历在不同点加载的页面增量,您认为其处于正确的百分比。

例如,在您认为一半的页面会被加载到代码集
load=50

等等

正如我所说,这只是一个概念。

代码:

function request() {
    showLoading(); //calls a function which displays the loading message

    myRequest = GetXmlHttpObject();
    url = 'path/to/script.php';
    myRequest.open('GET',url,true);
    myRequest.onreadystatechange = function() {
        if(myRequest.readyState == 4 && myRequest.status == 200) {
            clearLoading(); //calls a function which removes the loading message

            //show the response by, e.g. populating a div
            //with the response received from the server
        }
    }
    myRequest.send(null);
}

在请求开始时,我调用
showLoading()
,它使用Javascript动态添加与您的
preforeDiv
等价的内容。然后,当收到响应时,我调用
clearLoading()
,它会动态地删除与您的
preforerdiv

等价的内容,为什么?您已经有了浏览器工具。按F12。在firebug->Net Tab中选择网络选项卡Check我想他想在他的页面中放置一些进度条来显示页面加载状态?是的,我想根据页面加载状态放置进度条DOM加载可能需要0.2ms,但所有图像。。。1.5s+例如