在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?
我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法
Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国
—— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading
、loaded、interactive、complete),当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。
对于 readyState 状态需要一个补充说明:
- 在 interactive 状态下,用户可以参与互动。
- 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');
分享到:
相关推荐
为了确保这些脚本加载完成后才执行某些操作,比如DOM操作或者事件绑定等,我们需要一种机制来判断脚本是否已经加载完毕。本文将详细介绍如何使用JavaScript来判断脚本加载的状态,并给出一个跨浏览器兼容性的示例。 ...
本文将深入探讨如何在Unity3D中判断场景是否加载完成以及在此基础上进行的操作。 首先,我们来看一下`Application.LoadLevelAsync()`方法。这个方法用于异步加载指定的场景,返回一个`AsyncOperation`对象,它包含...
综上所述,要判断WebBrowser控件的页面是否最终加载完成,通常需要结合多种策略,例如监听`DocumentCompleted`事件,检查`ReadyState`,监控`ProgressChanged`,以及可能的话,利用JavaScript交互。根据具体的应用...
在这样的场景下,判断脚本加载是否完成至关重要,因为我们需要在脚本加载完成后执行依赖它的功能。本文将详细探讨如何在不同的浏览器环境下实现这个功能。 首先,对于大多数现代浏览器(如Firefox 2及以上版本、...
在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢? 我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+...
为了精确判断WebBrowser是否加载完成,我们需要跟踪所有的`OnDocumentComplete`事件,直到所有子框架也都加载完毕。下面是一个简单的实现方法: 1. 在Delphi中创建一个新的VCL Forms应用程序。 2. 在Form上添加一个...
这种方式可以用于替换或更新已加载的脚本,但同样为异步执行,可能无法确保脚本加载顺序。 3. **动态创建`<script>`元素**: 这种方法是创建一个新的`<script>`元素,设置其`type`和`src`属性,然后将其添加到`...
1. **无阻塞加载**:LABjs允许在不阻塞页面渲染的情况下加载脚本,通过将脚本加载与页面解析解耦,提升了页面的初始加载速度。 2. **动态加载**:你可以随时添加新的脚本到加载队列中,无论何时何地,只要需要,就...
通过异步加载,用户可以更快地看到页面内容,而无需等待所有脚本加载完成。 此外,ControlJS 还提供了脚本合并(Script Bundling)的功能。这允许开发者将多个小脚本合并成一个大文件,从而减少HTTP请求的数量。每...
7. **事件驱动编程**:Flash中的许多操作都是基于事件的,如`Event.COMPLETE`表示加载完成,`Event.OPEN`表示加载开始。通过注册事件监听器,开发者可以响应这些事件,更新加载特效。 8. **优化加载体验**:加载...
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探
3. **条件判断**:然而,当用户在脚本加载完成前跳转到目标页面时,`onload`事件在新页面中不再触发。为了解决这个问题,开发者在目标页面加载时检查`window.DDEarth`对象是否存在。如果对象已存在,说明脚本已经...
3. 如果页面中有多个JavaScript文件,可以考虑将window.onload事件中的代码提取到一个单独的JavaScript文件中,并确保该文件在所有其他脚本加载之后执行。 4. 对于需要频繁交互的复杂页面,合理组织代码,避免使用...
使用`async`属性的脚本会在下载完成后立即执行,无需等待文档解析完成,也不会等待其他脚本加载。这种方式可能适合那些对页面渲染无影响的第三方分析或跟踪脚本。尽管`async`可以进一步减少页面阻塞的时间,但它可能...
3. **document.body检查**:除上述方法外,还可以检查document.body是否存在,这同样可以作为判断DOM是否加载完成的依据。 将这些检查结合起来,可以有效地判断DOM是否可用: ```javascript function domReady(f) ...
在JavaScript中,我们可以使用`window.onload`或`document.addEventListener('DOMContentLoaded', function() {...})`来捕获页面加载完成的时刻。当这些事件触发时,我们将隐藏“loading”提示。代码如下: ```...
4. 如果指定了回调函数,则需要监听`<script>`元素的`load`事件或`readystatechange`事件(兼容IE浏览器),一旦脚本加载完成,即调用回调函数。 #### 示例代码 ```javascript // 直接通过URL调用 loadScript('...