首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 判断js文件加载完成

在JavaScript中,判断一个JS文件是否加载完成可以通过多种方式实现,以下是一些常见的方法:

1. 使用onload事件

当使用<script>标签动态加载JS文件时,可以为该标签添加onload事件处理器,以便在脚本加载完成后执行特定代码。

代码语言:txt
复制
<script src="path/to/your/script.js" onload="scriptLoaded()"></script>
<script>
function scriptLoaded() {
    console.log('JS文件加载完成');
}
</script>

或者,如果你是通过JavaScript动态创建<script>标签,可以这样做:

代码语言:txt
复制
var script = document.createElement('script');
script.src = 'path/to/your/script.js';
script.onload = function() {
    console.log('JS文件加载完成');
};
document.head.appendChild(script);

2. 使用defer属性

如果你在HTML中静态地引入JS文件,可以使用defer属性。这个属性告诉浏览器在解析HTML文档之后再执行脚本,但是会在DOMContentLoaded事件之前执行。

代码语言:txt
复制
<script src="path/to/your/script.js" defer></script>

在这种情况下,你可以在DOMContentLoaded事件中执行依赖于该脚本的代码,因为你知道脚本会在这个事件之前加载完成。

代码语言:txt
复制
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM内容加载完成,JS文件也应该加载完成了');
});

3. 使用Promiseasync/await

对于更现代的浏览器,你可以使用Promise来封装脚本加载逻辑,并使用async/await来等待加载完成。

代码语言:txt
复制
function loadScript(src) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

async function init() {
    try {
        await loadScript('path/to/your/script.js');
        console.log('JS文件加载完成');
    } catch (error) {
        console.error('JS文件加载失败', error);
    }
}

init();

4. 使用回调函数

如果你需要在脚本加载完成后执行特定的回调函数,可以将回调函数作为参数传递给加载脚本的函数。

代码语言:txt
复制
function loadScript(src, callback) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = callback;
    document.head.appendChild(script);
}

loadScript('path/to/your/script.js', function() {
    console.log('JS文件加载完成');
});

注意事项

  • 使用onload事件时,要确保脚本的加载不会因为网络问题或其他原因失败,否则onload事件不会触发。
  • 使用defer属性时,要确保脚本之间没有依赖关系,或者依赖关系已经被正确处理。
  • 使用Promiseasync/await时,要注意浏览器的兼容性,确保目标用户群体的浏览器都支持这些特性。

以上方法可以根据具体的应用场景和需求选择使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Js文件异步加载

    Js文件异步加载 浏览器中渲染引擎与Js脚本引擎是互斥的,在浏览器开始渲染页面时,如果遇到标签,会停止渲染当前页面,也就是说在脚本加载与执行的过程中会阻塞页面的渲染,在网速较差的环境下可能会出现浏览器页面假死的情况...,这也就是尽量将文件放置于后的原因,Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程,这称为非阻塞模式加载,当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥...,解析执行Js脚本的时机取决于异步加载Js的方式。...script type="text/javascript" defer="defer" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js..." > Script DOM Element Script DOM Element的方式即动态插入一个标签来加载外部Js脚本文件,将其作为onload事件的回调函数,即在页面加载完成后再执行

    10.4K20

    js判断iframe加载是否成功的方法

    今天木槿来探讨一下js判断iframe加载是否成功的方法,并且兼容多种浏览器。...这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面:ie浏览器IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在...添加一个 onreadystatechangeiframe.attachEvent("onreadystatechange", function(){//此事件在内容没有被载入时候也会被触发,所以我们要判断状态...;其他浏览器:Firefox,Opera,chrome等在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个 onload 事件,此事件只要触发就说名内容已经加载完毕...(iframe.attachEvent){iframe.attachEvent("onreadystatechange", function() {//此事件在内容没有被载入时候也会被触发,所以我们要判断状态

    2K20

    js怎么动态加载js文件(JavaScript性能优化篇)转

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 【基本优化】 将所有需要的标签都放在之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题...【合并JS代码,尽可能少的使用script标签】 最常见的方式就是带代码写入一个js文件中,让页面只使用一次标签来引入 ? 3....【无堵塞加载JS】 通过给script标签增加 defer属性或者是 async 属性来实现 js" defer> 注解: async...和defer不同之处是async加载完成后会自动执行脚本,defer加载完成后需要等待页面也加载完成才会执行代码 ?...该原理实现的也有很多不错的js类库可以使用,如LazyLoad.js,支持数组的形式引入,打开浏览器在network中可看到js是同步加载的 ? ? 7.

    19.7K12

    前端 实战项目·动态加载 JS 文件

    动态加载 JS 文件 对于 Vue、React 等框架开发的单页面应用,在某些页面开发特殊功能时经常需要依赖第三方 JS 文件,如果在全局引入 CDN 资源可能会加载冗余文件,此时最好使用动态加载方式...动态加载 JS 脚本指仅在某些特殊页面引入依赖文件,而非全局引入,这样可以避免在这些页面并未打开时造成加载无用的资源,提高页面加载速度的同时,也让整个项目更加模块化。... 元素也是如此,它与页面其他元素没有什么不同,所以可以手动创建 来加载 JS 文件。...都依赖 jquery,而 locale 依赖 fullcalendar,这种情况需要让 JS 文件按照一定的依赖关系按次序加载资源。...,但可以通过监听 onload 事件来判断文件是否加载完成,配合 Promise 等待上一个脚本文件加载完成后再加载下一个文件,从而实现按次序加载执行脚本。

    5.4K40

    Java加载js

    Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML)交互有四种情况...: 1) Android(Java)调用HTML中js代码 2) Android(Java)调用HTML中js代码(带参数) 3) HTML中js调用Android(Java)代码 4) HTML中js.../ jsObj 为桥连对象 Android容许执行js脚本需要设置: webSettings.setJavaScriptEnabled(true); (2) js(HTML)访问Android(Java...Java)访问js(HTML)代码 Android(Java)访问js(HTML)端代码是通过loadUrl函数实现的,访问格式如:mWebView.loadUrl("javascript: showFromHtml...()"); 说明: 1) Android访问url网址,需在AndroidManifest.xml文件,配置容许访问网络的权限: <uses-permission android:name="android.permission.INTERNET

    8.8K80
    领券