`
willko
  • 浏览: 383588 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DOM构造完成后,立即执行JS的函数(源于jquery)

阅读更多
如果使用onload的话,必须等到整个页面完成后才执行。。图片之类的下载完成后才会执行onload时间,但多数情况下,我们只是操作DOM而已,所以DOM构造完成就可以执行我们的js了,而DOM构造完成不同浏览器的实现都不一样,这个函数兼容多数浏览器,原理可以看...http://peter.michaux.ca/article/553

以下是代码:主要来自于jQuery
function ready(f){
	ready.bindReady();

	if (ready.isReady) {
		f();
	}
	else {
		ready.readyList.push(f);
	}
}

ready.isReady = false;
ready.readyBound = false;
ready.readyList = new Array();
ready.userAgent = navigator.userAgent.toLowerCase();
ready.browser = {
	version: (ready.userAgent.match(/.+(?:rv|it|ra|ie)[/: ]([d.]+)/) || [])[1],
	safari: /webkit/.test(ready.userAgent),
	opera: /opera/.test(ready.userAgent),
	msie: /msie/.test(ready.userAgent) && !/opera/.test(ready.userAgent),
	mozilla: /mozilla/.test(ready.userAgent) && !/(compatible|webkit)/.test(ready.userAgent)
};

ready.execute = function(){
	if (ready.isReady) {
		return;
	}
	var len = ready.readyList.length;
	for (var n = 0; n < len; n++) {
		ready.readyList[n]();
	}

	ready.readyList = null;

	if (ready.browser.mozilla || ready.browser.opera)
	document.removeEventListener("DOMContentLoaded", ready.execute, false);

	ready.isReady = true;
}

ready.bindReady = function(){
	if (ready.readyBound) {
		return;
	}
	ready.readyBound = true;

	if (ready.browser.mozilla || ready.browser.opera) {
		document.addEventListener("DOMContentLoaded", ready.execute, false);
	} else if (ready.browser.msie) {
		document.write("<scr" + "ipt id=__ie_init defer=true " + "src=\/\/:><\/script>");

		var script = document.getElementById("__ie_init");

		if (script) {
			script.onreadystatechange = function(){
				if (this.readyState != "complete")
				return;
				ready.execute();
			};

			script = null;
		}
	} else if (ready.browser.safari) {
		ready.safariTimer = setInterval(function(){
			if (document.readyState == "loaded" ||
			document.readyState == "complete") {

				clearInterval(ready.safariTimer);
				ready.safariTimer = null;

				ready.execute();
			}
		}, 10);
	}

	if (typeof window.addEventListener == "function") {
		window.addEventListener("load", ready.execute, false);
	}
	else if (typeof window.attacheEvent == "function") {
		window.attacheEvent("onload", ready.execute);
	}
}



使用方法
ready(function(){
                alert('DOM构造完成');
            });

分享到:
评论
3 楼 rym1020 2009-04-09  
能否搞个某dom对象加载完毕后就执行的判断方法?而不仅限于BODY
例如<div onload="alert('test')"></div>
2 楼 willko 2009-04-07  
rym1020 写道

如果要用到document.write()怎么办

呵呵,那就不能用了,write要即时的
因为,这个是用来代替onload的。
既然打算用load完才执行js,那write应该通过dom来实现才对~


1 楼 rym1020 2009-04-05  
如果要用到document.write()怎么办

相关推荐

    原生JS实现DOM加载完成马上执行JS代码的方法

    所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替[removed]。但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了。 如果只需要对DOM...

    vue监听数据渲染DOM完以后执行某个函数详解 开发技术.zip

    vue监听数据渲染DOM完以后执行某个函数详解 开发技术.zip

    JQuery DoM和ajax 操作

    JQuery DoM和ajax 操作大全源码

    JavaScript基础和DOM API函数

    JavaScript基础和DOM API函数

    初步认识JavaScript函数库jQuery

    jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 向您的页面添加 jQuery 库 ...

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...

    jQuery动画特效---精通JavaScript+jQuery

    JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通...第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]

    JS/jQuery判断DOM节点是否存在的简单方法

    JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象。既然...

    JavaScript之DOM事件(源代码)

    JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...

    【JavaScript源代码】JavaScript与JQuery框架基础入门教程.docx

     目录 一,JS对象二,DOM–1,作用–2,测试三,Jquery–1,概述–2,使用步骤–3,入门案例–4,jQuery的文档就绪四,JQuery的语法–1,选择器–2,常用函数–3,常用事件–4,练习总结 一,JS对象 二,DOM –1,...

    jQuery一个非常流行的操作Dom的JavaScript库

    jQuery 一个非常流行的操作Dom的 JavaScript 库

    jQuery学习笔记精心整理

    1. jQuery是第三方开发的执行DOM操作的极简化的函数库 (1). 第三方: 除了浏览器自带的函数和程序员自己编写的函数外,由第三方组织或个人编写的函数或对象——都要先下载才能用(官网: www.jquery.com) (2). 执行...

    jQuery1.7.2 js+帮助文档

    jQuery1.7.2 jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities

    jQuery DOM 1.pptx

    JavaScript+jQuery 网页特效设计 jQuery中的DOM操作(1) jQuery获得元素 jQuery设置元素 jQuery复制元素 1、jQuery获得元素 jQuery 中非常重要的部分,就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法,...

    脚本控制台 甲子版 通过控制台查看目的网页的DOM文档树,执行JavaScript脚本

    2,通过控制台查看目的网页的DOM文档树,执行JavaScript脚本, 界面介绍: 1, 命令历史窗口:保存命令的历史 2, 命令窗口 直接输入javascript语句,如:document.title; 将返回被调试页面的页面标题; ...

    精通javascript+jQuery

    《精通JavaScript+jQuery》从JavaScript的基础知识开始,围绕标准Web的各项技术予以展开,通过大量实例对JavaScript、CSS、DOM、Ajax等Web关键技术进行深入浅出的分析。主要内容包括JavaScript的概念和基本语法、CSS...

    jQuery DOM节点操作源码

    jQuery DOM节点操作源码,适合初学者哦,可以下载下来作为参考资料的。

    浅谈Jquery核心函数

    在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作。 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为...

    jquery dom对象 详细介绍1

    jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用!

Global site tag (gtag.js) - Google Analytics