网站地图    收藏   

主页 > 前端 > javascript >

js 判断页面所有js请求完毕

来源:未知    时间:2023-11-10 11:17 作者:小飞侠 阅读:

[导读] 要判断页面上所有的JavaScript请求是否完成,可以结合使用DOMContentLoaded事件和window.onload事件。DOMContendLoaded事件在DOM结构构建完成后触发,而window.onload事件在整个页面及其所有外部资源...

要判断页面上所有的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代码不会被计数。


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论