如果使用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构造完成');
});
分享到:
相关推荐
所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替[removed]。但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了。 如果只需要对DOM...
vue监听数据渲染DOM完以后执行某个函数详解 开发技术.zip
JQuery DoM和ajax 操作大全源码
JavaScript基础和DOM API函数
jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 向您的页面添加 jQuery 库 ...
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...
JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通...第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]
JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象。既然...
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
目录 一,JS对象二,DOM–1,作用–2,测试三,Jquery–1,概述–2,使用步骤–3,入门案例–4,jQuery的文档就绪四,JQuery的语法–1,选择器–2,常用函数–3,常用事件–4,练习总结 一,JS对象 二,DOM –1,...
jQuery 一个非常流行的操作Dom的 JavaScript 库
1. jQuery是第三方开发的执行DOM操作的极简化的函数库 (1). 第三方: 除了浏览器自带的函数和程序员自己编写的函数外,由第三方组织或个人编写的函数或对象——都要先下载才能用(官网: www.jquery.com) (2). 执行...
jQuery1.7.2 jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
JavaScript+jQuery 网页特效设计 jQuery中的DOM操作(1) jQuery获得元素 jQuery设置元素 jQuery复制元素 1、jQuery获得元素 jQuery 中非常重要的部分,就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法,...
2,通过控制台查看目的网页的DOM文档树,执行JavaScript脚本, 界面介绍: 1, 命令历史窗口:保存命令的历史 2, 命令窗口 直接输入javascript语句,如:document.title; 将返回被调试页面的页面标题; ...
《精通JavaScript+jQuery》从JavaScript的基础知识开始,围绕标准Web的各项技术予以展开,通过大量实例对JavaScript、CSS、DOM、Ajax等Web关键技术进行深入浅出的分析。主要内容包括JavaScript的概念和基本语法、CSS...
jQuery DOM节点操作源码,适合初学者哦,可以下载下来作为参考资料的。
在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作。 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为...
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用!