`
djob2008
  • 浏览: 130540 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

如何判断脚本加载完成

阅读更多

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

我们可以对加载的 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');
 
分享到:
评论

相关推荐

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

    为了确保这些脚本加载完成后才执行某些操作,比如DOM操作或者事件绑定等,我们需要一种机制来判断脚本是否已经加载完毕。本文将详细介绍如何使用JavaScript来判断脚本加载的状态,并给出一个跨浏览器兼容性的示例。 ...

    Unity3D切换场景时判断场景是否加载完成1

    本文将深入探讨如何在Unity3D中判断场景是否加载完成以及在此基础上进行的操作。 首先,我们来看一下`Application.LoadLevelAsync()`方法。这个方法用于异步加载指定的场景,返回一个`AsyncOperation`对象,它包含...

    C#判断webbrowser页面最终加载完成

    综上所述,要判断WebBrowser控件的页面是否最终加载完成,通常需要结合多种策略,例如监听`DocumentCompleted`事件,检查`ReadyState`,监控`ProgressChanged`,以及可能的话,利用JavaScript交互。根据具体的应用...

    判断脚本加载是否完成的方法

    在这样的场景下,判断脚本加载是否完成至关重要,因为我们需要在脚本加载完成后执行依赖它的功能。本文将详细探讨如何在不同的浏览器环境下实现这个功能。 首先,对于大多数现代浏览器(如Firefox 2及以上版本、...

    怎么判断js脚本加载完成

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

    精确判断webbrowser是否加载完成demo(delphi)

    为了精确判断WebBrowser是否加载完成,我们需要跟踪所有的`OnDocumentComplete`事件,直到所有子框架也都加载完毕。下面是一个简单的实现方法: 1. 在Delphi中创建一个新的VCL Forms应用程序。 2. 在Form上添加一个...

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

    这种方式可以用于替换或更新已加载的脚本,但同样为异步执行,可能无法确保脚本加载顺序。 3. **动态创建`<script>`元素**: 这种方法是创建一个新的`<script>`元素,设置其`type`和`src`属性,然后将其添加到`...

    LABjs无阻塞脚本加载工具

    1. **无阻塞加载**:LABjs允许在不阻塞页面渲染的情况下加载脚本,通过将脚本加载与页面解析解耦,提升了页面的初始加载速度。 2. **动态加载**:你可以随时添加新的脚本到加载队列中,无论何时何地,只要需要,就...

    ControlJS - 让脚本加载的更快

    通过异步加载,用户可以更快地看到页面内容,而无需等待所有脚本加载完成。 此外,ControlJS 还提供了脚本合并(Script Bundling)的功能。这允许开发者将多个小脚本合并成一个大文件,从而减少HTTP请求的数量。每...

    Flash Loading脚本编写加载特效.rar

    7. **事件驱动编程**:Flash中的许多操作都是基于事件的,如`Event.COMPLETE`表示加载完成,`Event.OPEN`表示加载开始。通过注册事件监听器,开发者可以响应这些事件,更新加载特效。 8. **优化加载体验**:加载...

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探

    引入外部js脚本加载慢与页面白屏问题的解决

    3. **条件判断**:然而,当用户在脚本加载完成前跳转到目标页面时,`onload`事件在新页面中不再触发。为了解决这个问题,开发者在目标页面加载时检查`window.DDEarth`对象是否存在。如果对象已存在,说明脚本已经...

    javascript页面加载完执行事件代码

    3. 如果页面中有多个JavaScript文件,可以考虑将window.onload事件中的代码提取到一个单独的JavaScript文件中,并确保该文件在所有其他脚本加载之后执行。 4. 对于需要频繁交互的复杂页面,合理组织代码,避免使用...

    跟我学习javascript的异步脚本加载

    使用`async`属性的脚本会在下载完成后立即执行,无需等待文档解析完成,也不会等待其他脚本加载。这种方式可能适合那些对页面渲染无影响的第三方分析或跟踪脚本。尽管`async`可以进一步减少页面阻塞的时间,但它可能...

    JavaScript判断DOM何时加载完毕的技巧

    3. **document.body检查**:除上述方法外,还可以检查document.body是否存在,这同样可以作为判断DOM是否加载完成的依据。 将这些检查结合起来,可以有效地判断DOM是否可用: ```javascript function domReady(f) ...

    js实现页面加载完毕之前loading提示效果

    在JavaScript中,我们可以使用`window.onload`或`document.addEventListener('DOMContentLoaded', function() {...})`来捕获页面加载完成的时刻。当这些事件触发时,我们将隐藏“loading”提示。代码如下: ```...

    loadScript异步加载脚本函数

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

Global site tag (gtag.js) - Google Analytics