Dom加载判断,兼容所有浏览器
Dom 加载完毕,兼容所有浏览器
Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。
IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete)
当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。
Opera 支持 onreadystatechange
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
if(document.attachEvent){
document.onreadystatechange=function(){
if(document.readyState == 'loaded'||document.readyState=="complete"||document.readyState=='interactive'){
document.getElementById("imgdivid").style.display="none";
Start();
}
};
}
else{
document.addEventListener("DOMContentLoaded",Start,false); //非IE
}
function Start(){
alert("document.readyState=" + document.readyState + "\nYes,I'm running");
}//]]>
</script>
</head>
<body>
<div align="center" id="imgdivid">
<img src="wait.gif">
</div>
</body>
</html>
上面的代码若果不好,你可以封装自己的包里 底下是我写的类
dload2.js
/**
* @author duping
* Administrator
*/
var duduppp=function(){
function domReady(){
var arr=new Array();
if(arguments.length>0){
for (var i = 0; i < arguments.length; i++) {
arr[i]= arguments[i];
}
}
if(document.all){
document.onreadystatechange=function(){
/*document.readyState=="complete"||document.readyState=='interactive'
* 这样写会加载2次,先加载interactive 之后再加载complete
* 如过要求效率的话写成interactive, opera 没有反应,opera 没有interactive 直接到complete
* 所以 另写了
*/
if(document.readyState=='loaded'||document.readyState=="complete"){
// alert(arr[0]+"------------IE--------------------");
Start(arr);
}
}
}
else{
// alert(arr[0]+"------------NO--IE--------------------");
document.addEventListener("DOMContentLoaded",Start(arr),false);
}
function Start(arr){
for(var i=0;i<arr.length;i++){
if(typeof arr[i]=='function'){
arr[i]();
}
}
}
}
return {domReady:domReady
}
}();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript" src="js/dload2.js"></script>
<script language="JavaScript" type="text/javascript">
function test1(){
var name=document.getElementById("name").value;
alert("my method is right"+name);
}
function test2(){
alert("生活需要激情!");
}
duduppp.domReady(test1,test2);
</script>
</head>
<body>
<input type="text" id="name" value="1234">
</body>
</html>
转自:http://hi.baidu.com/duduppp/blog/item/a2fb4ad43849c313a18bb795.html
发表评论
-
[转:]jQuery焦点中国地图
2013-04-17 11:05 1627转自:http://xiaoyaosr.blog.51cto ... -
一个轻量级的网页遮罩层jQuery插件
2012-11-14 17:48 6327一个轻量级的网页遮罩层jQuery插件 分 ... -
通过Spring Mail Api发送邮件
2012-11-14 17:47 1385通过Spring Mail Api发送邮件 ... -
jquery.validate
2012-11-09 16:51 1010jquery.validate 需要JQuery ... -
Hibernate commit() 和flush() 的区别(转)
2012-09-28 09:46 2576Hibernate commit() 和flush( ... -
maven3.0.2下settings.xml配置下(转)
2012-09-25 19:14 5881maven3.0.2下settings.xml配置下 ... -
hibernate中Qurey类的setDate方法自动截掉时分秒——setDate和setTimeStamp(转)
2012-09-03 10:30 2981原帖地址:http://www.iteye.com/to ... -
Maven3.0.3的环境变量配置
2012-07-19 11:22 2962转自http://hi.baidu.com/douxinchu ... -
转:org.apache.catalina.core.JreMemoryLeakPreventionListener解决办法
2012-07-18 15:38 5464转自:http://blog.csdn.net/ang ... -
eclipse中的java文件图标j成空心
2012-07-06 10:06 13443eclipse中的java文件图标j成空心 ... -
jQuery - Ajax - readyState获取请求操作的当前状态
2012-06-29 14:46 0jQuery - Ajax - readyState获取请求 ... -
document.readyState几种状态及示例
2012-06-29 14:33 1884document.readySta ... -
DOM Ready 详解
2012-06-29 14:03 3045转自:http://www.cnblogs.com/zhang ... -
转】js实现另存为的方法
2012-06-29 13:42 2855转】js实现另存为的方法 本文转自http://www ... -
js添加和去除千分号
2012-06-22 11:41 2072利用js的replace方法和正则表达式实现 1 ... -
Hibernate的游离态与持久态转换(转)
2012-06-18 10:30 5152本文转自:http://blog.csdn.net/sdban ... -
maven继承parent,relativePath warn信息的解决办法
2012-06-11 17:12 25891转自:http://blog.sina.com.cn/s/bl ... -
使用Maven管理Eclipse Java项目
2012-06-11 17:10 1025转自:http://www.blogjava.net/lost ... -
The parent project must have a packaging type of POM
2012-06-11 17:09 25198The parent project must ha ... -
(转)利用eclipse构建和部署maven工程
2012-05-31 12:44 2293本文转自http://ll-feng.iteye.c ...
相关推荐
使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在[removed]=function(){}事件处理函数中,但[removed]事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会...
它的主要目标不是兼容所有浏览器,而是简化常见操作。 用法 这个库是一个 AMD 模块,需要一个 AMD 加载器才能运行(例如 )。 应用程序接口 元素选择 dom.get([element, ] selector) : 选择一个元素 别名: dom.$ ...
Zero Clipboard实现简单跨浏览器复制 var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button,...
Scrollload 是一个无依赖、体积极小(压缩 gzip后不到3k)、可配置性高(可以自定义加载时候动画、加载完后的dom、提前加载的距离)、可扩展性强大(很方便做到指定容器内的滚动、多tab的滚动、异常处理、刷新重新加载...
第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件。当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有,则调用该代码来...
* 某些情况下状态栏辅助信息和工具栏图标无法加载的问题 [Webkit 核心] * 使用 PAC 代理可能导致 HTTPS 站点无法访问 * 完善 JS alert 对话框的处理 * 完善对 HTML5 游戏重力迷宫 Gravity Maze 的支持 * 完善对...
/* * Heng.js * 实现了与jQuery完全一致的调用方式和细节,内部已循环设置所有,... * H(fn) DOM加载完毕时执行, 等价于jQuery库中的$(fn)=$(document).ready(fn) * Author: wangheng * Date: 2015-07-16 */
/* * Heng.js * 实现了与jQuery完全一致的调用方式和细节,内部已循环设置所有,... * H(fn) DOM加载完毕时执行, 等价于jQuery库中的$(fn)=$(document).ready(fn) * Author: wangheng * Date: 2015-07-16 */
有效解决了使用AJAX单一Dom加载模式过多卡机,变量、函数冲突错乱等问题。保持各Dom之间既"分离"又可联系。 04) 标签: 超强的多标签窗口运行管理模式,无限极的左栏分类。 05) 扩展: 拥有无敌的用户扩展能力与插件...
有效解决了使用AJAX单一dom加载模式过多卡机,变量、函数冲突错乱等问题。保持各dom之间既"分离"又可联系。 04) 标签: 超强的多标签窗口运行管理模式,无限极的左栏分类。 05) 扩展: 拥有无敌的用户扩展能力与...
这将自动编译并将所有更改发送到浏览器,而无需重新加载。 编译过程完成后,您将获得浏览器连接的REPL。 一个简单的尝试方法是: (js/alert "Am I connected?")并且您应该在浏览器窗口中看到警报。 要清除所有编译...
KindEditor 是什么? ... 主要特点 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM ...兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera
解析:判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出...
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即...兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera 压缩内容简约已经被我简约化了,去除了一些自带的调试的文件!
系统要求/下载桌面应用程序或:*具有JavaScript 1.5或更高版本引擎CSS2.1兼容网络浏览器*安装了Node.js 0.10.0或更高版本*或具有PHP 5.2.0或更高扩展名的网络服务器*最低分辨率1024x768支持所有主要浏览器,包括:...
比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就...
WebAssembly 是一种新的客户端技术,可以在所有现代浏览器(包括移动浏览器)中实现近乎原生的性能,而且不需要插件。 许多语言,包括 C、C#、Go 和 Rust,都可以编译成面向基于栈的 WebAssembly 虚拟机的代码。 ...
快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都...兼容:支持大部分主流浏览器,比如 IE、firefox、Safari、Chrome、Opera
用于 DOM 操作的 (1.x 用于旧的 Internet Explorer 兼容性) 和用于管理应用程序逻辑和可视化。 允许通过 Backbone 本地存储数据。 用于 Javascript 库依赖管理和优化。 用于加载 HTML 模板。 开发环境 服务器...