`
caibinghong
  • 浏览: 150808 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢? 我们可以对加载的 JS 对象使用 onload 来判断

 
阅读更多

在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?

我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete),当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。

对于 readyState 状态需要一个补充说明:

  1. 在 interactive 状态下,用户可以参与互动。
  2. Opera 其实也支持 js.onreadystatechange,但他的状态和 IE 的有很大差别。

具体实现代码如下:

function include_js(file) {
    var _doc = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    _doc.appendChild(js);

    if (!/*@cc_on!@*/0) { //if not IE
        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
        js.onload = function () {
            alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
        }
    } else {
        //IE6、IE7 support js.onreadystatechange
        js.onreadystatechange = function () {
            if (js.readyState == 'loaded' || js.readyState == 'complete') {
                alert('IE6、IE7 support js.onreadystatechange');
            }
        }
    }

    return false;
}

//execution function
include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');

 

——————————————————————————————————————————

照以上的代码发现一个问题:IE下的  不管有没有加载成功都会触发。而谷歌就不会了,为什么这样子?

 

 

 

分享到:
评论

相关推荐

    怎么判断js脚本加载完成

    在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢? 我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+...

    vue如何实现动态加载脚本

    tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个不错的实践,...

    动态加载JS脚本的4种方法.doc

    在Web开发中,动态加载JavaScript脚本是一种常见的优化策略,它允许在页面加载后根据需要按需加载脚本,从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法,并探讨它们的工作原理和应用场景。 1...

    JS脚本加载后执行相应回调函数的操作方法

    每当脚本加载成功后,函数会将其添加到数组中,并在所有脚本加载完成后执行回调函数。 #### 并行加载 并行加载则是在一开始就同时加载所有的脚本文件。这种方法的优点是能加快总的加载时间,因为多个文件可以同时...

    ASP.NET回调函数

    ASP.NET回调函数是一种技术,它允许用户在不重新加载整个页面的情况下与服务器进行交互,从而实现无刷新的数据更新。这种技术极大地提升了用户体验,因为它减少了页面的加载时间和网络流量,尤其适用于实时数据更新...

    loadScript异步加载脚本函数

    4. 如果指定了回调函数,则需要监听`<script>`元素的`load`事件或`readystatechange`事件(兼容IE浏览器),一旦脚本加载完成,即调用回调函数。 #### 示例代码 ```javascript // 直接通过URL调用 loadScript('...

    JavaScript 动态添加脚本,并触发回调函数的实现代码

    为了在脚本加载完成后执行回调函数,我们需要添加一个事件监听器。通常我们会监听`'load'`事件,表示脚本加载成功,或者监听`'error'`事件,表示脚本加载失败。 ```javascript script.onload = function() { // ...

    回调函数

    例如,当页面加载完成或者用户进行某种操作时,可能会调用`common_util.js`中的异步函数,并传入一个回调函数来处理结果。 回调函数的一个潜在问题就是"回调地狱",即当多个异步操作嵌套在一起时,代码会变得难以...

    js 判断脚本加载完毕的代码

    代码如下: if(this.isIE) { js....: ‘+src)}//chrome JS判断脚本是否加载完成 在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢? 我们可以对加

    LABjs无阻塞脚本加载工具

    在实际应用中,根据项目需求,你可以组合使用这些API,比如通过`chain`方法链接脚本加载,或者利用`queue`方法创建加载队列,确保脚本按照特定顺序执行。 总结来说,LABjs是JavaScript开发中提高页面性能的利器,...

    js动态引入外部js脚本并获取里面的变量值.pdf

    在这个例子中,`$.getScript()`会异步加载`new.js`,一旦脚本加载完成并执行,回调函数就会被调用。此时,由于`new.js`中的代码已经执行,我们可以在回调函数中安全地访问`poiObj`这个变量。 然而,需要注意的是,`...

    vue动态加载js.zip

    5. 回调处理:在回调函数中,我们可以处理脚本加载后的逻辑,比如初始化新加载的组件或功能。 以压缩包中的`vue-plugin-load-script-master`为例,这是一个Vue插件,用于简化动态加载JavaScript的过程。使用这个...

    JS异步加载库

    4. 回调机制:提供回调函数,以便在脚本加载完成或失败后执行相应的逻辑。 5. 模块化设计:支持模块化,允许用户按需导入和使用特定功能。 四、自定义JS异步加载库的实现 1. 创建一个函数,接收脚本URL和可选的回...

    JS动态加载脚本并执行回调操作

    本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数。  我们可以动态的创建 [removed] 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本...

    如何在vc程序中嵌入脚本语言

    例如,在Lua中,可以捕获lua_pcall()函数的返回值,它会返回一个错误码,用于判断是否有错误发生。 7. 性能优化: 考虑到脚本执行可能对性能的影响,可以使用预编译脚本(如Lua的luaL_loadbufferx()加载预编译的...

    Jquery实现手机端上拉滚动加载更多数据

    1. 初始化Dropload插件,设置回调函数,当滚动到底部时,这个回调函数会被调用。 2. 在回调函数中,使用Ajax请求加载更多的数据,通常数据来源是服务器API。 3. 数据返回后,解析JSON数据,然后使用Jquery动态创建新...

    ie判断图片加载成功代码

    在IE浏览器中,判断图片加载成功是一个常见的需求,特别是在网页开发或者进行性能优化时。这个需求通常涉及到JavaScript的事件处理和浏览器兼容性问题。本文将深入探讨如何在IE中实现图片加载成功的判断,并提供相关...

    Unity动态加载外部3D模型的插件TriLib2.2.0.zip

    4. 设置模型加载完成后执行的回调函数,以便进行进一步处理。 5. 在场景中创建模型实例,并应用必要的动画或物理效果。 总的来说,TriLib2.2.0是一个强大的工具,它简化了Unity中动态加载和管理外部3D模型的过程,...

    LABjs-master--js有序加载.rar

    4. 执行回调函数:在脚本加载完成后,可以设置回调函数进行下一步操作,如初始化组件或执行业务逻辑。 例如: ```javascript $LAB .script("dependencies.js") // 先加载依赖脚本 .wait(function() { // 等待...

Global site tag (gtag.js) - Google Analytics