以下是一个简单的例子，演示如何使用 onprogress 事件来监测图片的加载进度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onprogress 事件示例</title>
</head>
<body>
<img src="example.jpg" alt="Example Image" onprogress="handleProgress(event)" />
<script>
function handleProgress(event) {
if (event.lengthComputable) {
// 获取已加载的字节数和总字节数
var loaded = event.loaded;
var total = event.total;
// 计算加载进度
var progress = (loaded / total) * 100;
// 在控制台输出加载进度
console.log('已加载：' + loaded + ' 字节，总共：' + total + ' 字节，加载进度：' + progress.toFixed(2) + '%');
} else {
console.log('无法获取加载进度信息。');
}
}
</script>
</body>
</html>
在这个例子中，<img> 元素带有 onprogress 属性，当图片加载过程中接收到数据时，会触发 handleProgress 函数。在这个函数中，使用 event.lengthComputable 来检查是否能够获取加载进度信息，然后计算并输出加载进度。
需要注意的是，并非所有资源都支持 onprogress 事件，具体支持的资源类型可能因浏览器而异。
同样，推荐使用 JavaScript 中的 addEventListener 方法而不是在 HTML 属性中直接使用事件处理程序，以提高代码的可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/4444/HTML