我对实时网站下载进度（指示性）预加载器很感兴趣，它可以准确地监视所有可能的页面内容和资源的下载进度 .
为简单起见，这可能仅限于监控样式化静态网站的下载进度，包括内容和html / css / js / img / video / font / etc资源数据
我理解这可能只有在不能测量和监视执行此操作的初始数据的下载的情况下才能实现，在这种情况下，最好将其保持在最小范围内 .
我正在探索的一条可能的路线涉及ajax和php，并监视ajax请求下载标记（包括内容）的进度以及包含在该标记中的视频元素源 . 实际上，在初始页面请求时，带有必要（vanilla）javascript的空php文档在dom中生成progress元素，对另一个php文档和其他资源中的标记（包括内容）执行必要的ajax请求（测试/使用视频），使用进度事件监听器监视进度，计算总进度并相应地更新进度元素，然后在总进度完成时解析和加载标记（和内容）和资源 . 关于此配置的一些注意事项：a）要求设置所请求的标记文档响应标头的内容长度（可以使用某些嵌入式php动态完成）以及包含内容处置：附件b）强制浏览器下载视频和监视进度，响应类型设置为blob，使用AJAX创建对象URL，然后设置为视频源 . c）一些区间函数用于执行必要的进度更新，并检查进度和视频元素的父（容器）元素是否为空以从缓存加载它们以及检查加载标记和内容（进而加载）的元素“完成进度完成”时的同时视频
例：
Index.php（初始请求页面）
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
</head>
<body>
<noscript>This is Sparta!</noscript>
<script>
contentDiv = document.createElement("div");
document.body.appendChild(contentDiv);
contentDiv.setAttribute("id", "content");
progressPH = document.createElement("progress");
contentDiv.appendChild(progressPH);
progressPH.setAttribute("id", "ph");
progressPH.setAttribute("value", "0");
progressPH.setAttribute("max", "100");
progressPM = document.createElement("progress");
contentDiv.appendChild(progressPM);
progressPM.setAttribute("id", "pm");
progressPM.setAttribute("value", "0");
progressPM.setAttribute("max", "100");
progressPHM = document.createElement("progress");
contentDiv.appendChild(progressPHM);
progressPHM.setAttribute("id", "phm");
progressPHM.setAttribute("value", "0");
progressPHM.setAttribute("max", "100");
progressComment = document.createElement("p");
contentDiv.appendChild(progressComment);
progressComment.setAttribute("id", "progress-comment");
function onLoad(f) {
if (onLoad.loaded) window.setTimeout(f, 0);
else if (window.addEventListener) window.addEventListener("load", f, false);
else if (window.attachEvent) window.attachEvent("onload", f);
}
onLoad.loaded = false;
onLoad(function() {
onLoad.loaded = true;
console.log('window loaded')
});
var pBarH = document.getElementById('ph');
var pBarM = document.getElementById('pm');
var pBarHM = document.getElementById('phm');
pBarH.value = 0;
pBarM.value = 0;
pBarHM.value = 0;
var reqH = new XMLHttpRequest();
var reqM = new XMLHttpRequest();
reqH.addEventListener("progress", updateProgressH);
reqM.addEventListener("progress", updateProgressM);
reqH.open('GET', 'index2.php', true);
reqM.open('GET', 'rain.mp4', true);
reqM.responseType = 'blob';
var percentCompleteH = 0;
var percentCompleteM = 0;
var percentCompleteHM = 0;
function updateProgressH(oEventH) {
if (oEventH.lengthComputable) {
percentCompleteH = oEventH.loaded / oEventH.total * 100;
pBarH.value = percentCompleteH;
} else {
alert('no');
}
}
function updateProgressM(oEventM) {
if (oEventM.lengthComputable) {
percentCompleteM = oEventM.loaded / oEventM.total * 100;
pBarM.value = percentCompleteM;
} else {
alert('no');
}
}
var interval_prog = setInterval(function() {
percentCompleteHM = (percentCompleteH + percentCompleteM) / 2;
if (percentCompleteHM < 100) {
console.log(percentCompleteHM);
pBarHM.value = percentCompleteHM;
if (document.getElementById('progress-comment') != null) {
document.getElementById('progress-comment').innerHTML = Math.floor(percentCompleteHM);
}
} else {
clearInterval(interval_prog)
}
}, 100);
reqH.onload = function() {
if (reqH.status >= 200 && reqH.status < 400) {
var resp = reqH.responseText;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(resp, "text/html");
var tds = xmlDoc.getElementById("loadingDiv");
console.log(xmlDoc);
var interval_mark = setInterval(function() {
// $("li#"+id).length will be zero until the node is loaded
if (percentCompleteHM >= 100) {
// "exit" the interval loop with clearInterval command
clearInterval(interval_mark)
// since the node is loaded, now we can open it without an error
document.getElementById('content').innerHTML = tds.innerHTML;
}
}, 100);
} else {}
};
reqM.onload = function() {
if (reqM.status >= 200 && reqM.status < 400) {
var interval_vid = setInterval(function() {
// $("li#"+id).length will be zero until the node is loaded
if (document.getElementById('myVideo') != null) {
// "exit" the interval loop with clearInterval command
clearInterval(interval_vid)
// since the node is loaded, now we can open it without an error
document.getElementById('myVideo').src = URL.createObjectURL(reqM.response);
document.getElementById('myVideo').muted = true;
document.getElementById('myVideo').loop = true;
if (percentCompleteHM >= 100) {
document.getElementById('myVideo').play();
}
}
}, 100);
} else {}
};
reqH.send();
reqM.send();
</script>
</body>
</html>
Index2.php（请求的数据）
<?php
header("Content-Disposition: attachment");
$filesize=filesize('index2.php');
header("Content-Length: " . $filesize); // set header length
readfile('index2.php');
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="loadingDiv">
<video id="myVideo"></video>
<h1>Hello world!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
我已经和其他开发人员谈过了，而且“由于海森堡的不确定性原则，这是不可能的”，“你需要做一个扩展”的更多细微差别和现实的反应“你有没有理智”这样做的原因“和”理论上可行......但非常痛苦“
如果确实没有其他解决方案预加载并准确监视（并实时呈现）所有可能的页面内容和资源（下至字节）的下载进度，如下面提供的有限示例：
1：如何根据与文件大小的比率组合的ajax请求执行计算以准确表示总进度？正如目前计算的那样，如果有2个ajax请求，无论大小如何，ajax请求占进度的50％，并且这不能准确地表示总进度 . 2：我可以在代码中进行哪些改进？ 3：如何在onload事件4的主体中的脚本元素之前加载标记中的标记（和内容）：我如何进行请求，解析（如果需要），加载和排序其他类型的数据？ CSS / JS / IMG /字体/等
5百万美元的问题：实现实时网站下载进度（指示性）预加载器的最简单方法是什么，它可以准确地监控所有可能的页面内容和资源的下载进度 .
谢谢