要判断页面上所有的JavaScript请求是否完成,可以结合使用DOMContentLoaded事件和window.onload事件。DOMContendLoaded事件在DOM结构构建完成后触发,而window.onload事件在整个页面及其所有外部资源(如图片、样式表、脚本等)加载完成后触发。通过监听这两个事件,可以确定页面的JavaScript请求是否完全加载。
以下是示例代码:
// 定义一个计数器,用于记录已加载的JavaScript请求数量
var jsCount = 0;
// DOMContentLoaded事件回调函数
document.addEventListener("DOMContentLoaded", function() {
// 在此处执行当DOM结构构建完成后要执行的代码
// 判断页面所有的JavaScript请求是否已加载完成
if (jsCount === 0) {
allJsRequestsCompleted();
}
});
// 监听JavaScript请求的加载状态
document.addEventListener("load", function(event) {
// 判断当前请求是否为JavaScript
if (event.target.tagName.toLowerCase() === "script") {
jsCount++;
// 判断页面所有的JavaScript请求是否已加载完成
if (jsCount === 0) {
allJsRequestsCompleted();
}
}
}, true);
// window.onload事件回调函数
window.onload = function() {
// 在此处执行当页面及其所有外部资源加载完成后要执行的代码
// 判断页面所有的JavaScript请求是否已加载完成
if (jsCount === 0) {
allJsRequestsCompleted();
}
};
// 已加载所有JavaScript请求的处理函数
function allJsRequestsCompleted() {
console.log("所有JavaScript请求已加载完毕");
// 在这里编写所有JavaScript请求加载完毕后要执行的代码
}
在上述代码中,我们定义了一个计数器jsCount,每当加载一个JavaScript请求时,计数器加1。在DOMContentLoaded事件和window.onload事件的回调函数中,判断jsCount是否为0,如果是,则表示所有JavaScript请求已加载完成,可以执行相应的代码。
请注意,代码仅在加载外部的<script>标签时才起作用,内部嵌入的JavaScript代码不会被计数。