如果使用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构造完成');
});
分享到:
相关推荐
在Vue应用中,我们经常需要在数据变化后等待DOM更新完成,然后执行某些操作,例如进行DOM操作或者动画处理。本篇将详细介绍如何在Vue中监听数据渲染DOM完毕后执行特定函数。 Vue 提供了一个名为`$nextTick`的方法,...
这时,我们可以利用原生JavaScript实现DOM加载完成即刻执行的JS代码,避免不必要的延迟。 `jQuery`提供了`$(document).ready()`方法,它在DOM准备就绪时执行,但为了不依赖整个jQuery库,我们可以模仿其工作原理来...
### jQuery.js构造函数详解 #### 一、引言 jQuery 是一款非常流行的 JavaScript 库,它简化了许多在网页上常见的操作,例如 HTML 文档遍历、事件处理、动画以及 Ajax 交互等。jQuery 的核心是一个构造函数,该构造...
在网页开发中,自动执行 JS 函数是一种常见的需求,例如在页面加载完成后执行某些操作。今天,我们将介绍网页中 JS 函数自动执行常用三种方法。 JS 方法 在 HTML 中,我们可以使用 `onload` 事件来自动执行 JS ...
- `$(document).ready(function() {...})`:页面加载完成时执行的函数。 - `$(element).on('event', function() {...})`:动态绑定事件,支持多种事件类型。 5. **动画效果** - `$(element).fadeIn()`/`.fadeOut...
1. 文件大小:`.min.js`是经过压缩和混淆后的版本,文件大小显著减小,有利于提高页面加载速度,降低用户等待时间。 2. 代码优化:通过删除注释、合并变量、缩短函数名等手段,`.min.js`在不牺牲功能的前提下,实现...
- **延迟加载**:使用`.ready()`或`$(document).ready()`确保DOM加载完成后执行脚本,避免阻塞页面渲染。 - **选择器优化**:合理使用CSS选择器,避免过于复杂的选择表达式,以提高性能。 - **事件委托**:利用`....
JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...
`jquery-1.9.1.js`是未压缩的源代码版本,便于开发者阅读、调试和学习,而`jquery-1.9.1.min.js`是经过压缩和优化后的版本,体积更小,适用于生产环境,以提高页面加载速度。 jQuery 1.9.1版本是一个重要的里程碑,...
jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,深受前端开发者的喜爱。在这个主题中,我们将深入探讨jQuery 1.11.3版本的核心特性及其在实际开发中的应用。...
标题中的“jquery-3.5.1.min.js”代表的是jQuery库的3.5.1版本的压缩后的最小化文件,这种格式的文件通常用于实际生产环境中,以减小页面加载时间。"jquery-3.5.1.min.js"是这个特定版本的核心文件,包含了所有...
而"jquery-1.8.3.min.js"则是经过压缩和优化后的版本,文件大小显著减小,适用于生产环境,可以提高网页加载速度。 jQuery 1.8.3版本在功能上继承了jQuery一贯的优雅特性,包括选择器引擎(Sizzle)、链式调用、DOM...
jQuery的引入通常有两种形式:未压缩的`jquery-2.1.1.js`和压缩版的`jquery-2.1.1.min.js`。未压缩版本主要用于开发环境,便于调试和理解代码;而压缩版本则用于生产环境,通过去除空格、注释和简化变量名等方式减小...
2. **$(document).ready()**:页面加载完成后执行的函数,确保DOM完全加载后才运行jQuery代码。 3. **插件开发**:jQuery易于扩展,可以通过`.extend()`方法创建插件,增强其功能。 4. **链式调用**:jQuery对象...
- **事件绑定(Event Handling)**:`click()`, `mouseover()`, `mouseout()`, `keydown()`等方法简化了事件绑定,同时`$(document).ready()`确保在DOM加载完成后执行代码。 - **事件委托(Event Delegation)**:...
然后,在`<script>`标签中编写jQuery代码,通常放在`<body>`标签的底部,以确保DOM加载完成后再执行: ```html $(document).ready(function(){ // jQuery代码在这里 }); ``` 以上就是关于JQuery-2.1.1.js的基本...
总结来说,确保代码在DOM加载完成后再执行是网页开发中的基础实践,可以利用jQuery的`$(document).ready()`或者原生JavaScript的`DOMContentLoaded`和`window.onload`事件来实现这一目标。正确使用这些方法可以优化...
通常,将jQuery库放在`<head>`标签内或者`<body>`标签的底部,以确保所有DOM元素加载完成后再执行jQuery代码。 ```html <script src="js/jquery-1.12.4.min.js"> $(document).ready(function(){ // jQuery代码在...
在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。本篇文章将深入探讨jQuery 3.1.1版本的两个核心文件——`jquery-3.1.1.js`和`jquery-3.1.1.min...