html5 如何判断加载进度条

在HTML5中，我们可以使用Progress标签来创建一个进度条，要判断一个页面的加载进度，我们需要使用JavaScript来获取和更新进度条的状态，以下是如何实现这个功能的详细步骤：

（图片来源网络，侵删）

1、我们需要在HTML中创建一个进度条，这可以通过使用HTML5的<progress>标签来实现。

<progress id="progressBar" max="100" value="0"></progress>

在这个例子中，我们创建了一个id为"progressBar"的进度条，它的最大值为100，初始值为0。

2、接下来，我们需要使用JavaScript来获取和更新进度条的值，我们可以使用window.onload事件来监听页面的加载状态，并使用XMLHttpRequest对象来获取页面的加载进度。

window.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', document.location, true);
    xhr.responseType = 'arraybuffer';
    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = event.loaded / event.total * 100;
            document.getElementById('progressBar').value = percentComplete;
        }
    };
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('progressBar').value = 100;
        }
    };
    xhr.send();
};

在这个例子中，我们首先创建了一个新的XMLHttpRequest对象，并打开了一个新的请求，该请求的目标URL是当前页面的URL，我们设置了请求的响应类型为’arraybuffer’，这样我们就可以在onprogress事件中使用event.loaded和event.total属性来获取已加载的数据量和总数据量。

在onprogress事件处理器中，我们计算了加载完成的百分比，并将这个值设置为进度条的值，当页面加载完成时，我们将进度条的值设置为100。

3、我们需要在CSS中设置进度条的样式。

progress {
    width: 100%;
    height: 20px;
}

在这个例子中，我们将进度条的宽度设置为100%，高度设置为20px。

以上就是如何在HTML5中判断加载进度条的方法，需要注意的是，这种方法只能用于同源的页面，也就是说，请求的URL必须和当前页面的URL具有相同的协议、主机和端口，由于浏览器的安全性限制，这种方法可能无法在所有浏览器中正常工作。