[f]动态判断js加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析。这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内容的正常解析,由此,便可以提高页面首次加载的速度。
那么,既然js是异步加载,我们又该如何判断它是否加载完成呢?
在IE或一些基于IE内核的浏览器中(如Maxthon),它是通过script节点的readystatechange方法来判断的,而其它的一些浏览器中,往往是通过load事件来决定的,如下代码:
function include_js(file) {
var _doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
if (document.all) {
js.onreadystatechange = function() {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
alert('IE6、IE7 support js.onreadystatechange');
}
}
} else {
js.onload = function() {
alert('Firefox、chrome and others support js.onload');
}
}
}
include_js('http://static2.baihe.com/js/finallyBaiheHead.js?time=20141120');
我们把该方法添加到body的load事件中,<body onload='dynamicLoad()'>,运行,会发现IE或Maxthon中,会弹出‘done’对话框,但是firefox或chrome中却完全没有反应,why?
这是因为,如果script节点没有添加到DOM树中,那么在chrome和firefox中是不会响应script的load事件的。但是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 (document.all) {
js.onreadystatechange = function() {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
alert('IE6、IE7 support js.onreadystatechange');
}
}
} else {
js.onload = function() {
alert('Firefox、chrome and others support js.onload');
}
}
}
include_js('http://static2.baihe.com/js/finallyBaiheHead.js?time=20141120');
[f]动态判断js加载完成的更多相关文章
- 动态加载JS过程中如何判断JS加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- web项目中js加载慢问题解决思路
最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件
今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
随机推荐
- js中RegExp类型
ECMAScript通过RegExp类型来支持正则表达式. var expression = / pattern / flag ; pattern可以是任意的正则表达式.每个正则都带有标志,用以正则表 ...
- Python自动化 【第一篇】:Python简介和入门
Python简介: 一.什么是python Python是一门动态解释性的强类型定义语言. pythonde 特点:“优雅”.“明确”.“简单”. 二.Python由来 python的创始人为吉多·范 ...
- CentOS 6.5下搭建LAMP环境详细步骤
1.确认搭建LAMP所需的环境是否已经安装: [root@localhost ~]#rpm -q make gcc gcc-c++ zlib-devel libtool libtool-ltdl li ...
- div一直浮动在页面的底部
永远在底部是那种无论滚动条怎么拉,都可以看见悬浮在底部的那种,如果是那种,是用固定定位做的.另外注意页面中最后的元素或者body要空出固定条的高度,不然最后的元素会被遮挡. html: <div ...
- Asp.net Page指令
Page指令为编译器编译页面时使用的指令 指令的格式为 <%@ [Directive] [Attribute=value]%> <%@ Page Language="C#& ...
- 1.Mybatis原理
Mybatis是一个持久层框架,Apache底下的一个项目,它的前身是ibatis,它支持普通的SQL查询,存储过程和高级映射的优秀框架.Mybatis消除了几乎所有的JDBC代码和参数的手工设置以及 ...
- 64位Win7下运行ASP+Access网站的方法
64位Win7下运行ASP+Access网站的方法 近日系统升级为WIN7 64位之后,突然发现原本运行正常的ASP+ACCESS网站无法正常连接数据库. 网上搜索多次,终于解决了问题,总结了几条经验 ...
- 自定义UIPageControl,可设置任意图片image。
[self.pageControl setValue:[UIImage imageNamed:@"选中图片名称"] forKeyPath:@"_currentPageIm ...
- (转载)selenium-webdriver(python)
转载地址: http://www.cnblogs.com/fnng/p/3183777.html 本节重点: 简单对象的定位 -----自动化测试的核心 对象的定位应该是自动化测试的核心,要想操作一个 ...
- JSON.parse()和JSON.stringify()(转载)
parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...