js常见执行方法$(document).load(),$(document).ready()
1. window.onload = function(){};
当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。
2. $(document).ready();
当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。
常用于检测页面（及其附带资源）是否加载完毕。
总而言之，他们的调用顺序是window.onload = function(){}; >> $(document).ready(); ,测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery立即执行函数</title>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
console.log("ready");
});
window.onload = function () {
console.log("onload");
};
</script>
</body>
</html>
测试结果如下：
区别：
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
以下代码无法正确执行：
window.onload = function(){
alert("text");
};
window.onload = function(){
alert("text");
};
结果只输出第二个
$(document).ready()能同时编写多个
以下代码正确执行：
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
});
结果两次都输出 Hello World
另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
Jquery 代码如下：
$(window).load(function (){
// 编写代码
});
等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}
——————————————————————————————
最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。
起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而
onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大
较多的时候，这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了，还不见jquery的效果出来。
删了onload加载的方法试试，结果还是一样，看来没有必要把原本的onload事件绑定也改用$(document).ready()来
写。那是什么原因使得Firefox正常而IE就能呢？接着调试，发现IE下原来绑定的onload方法竟然先于$(document).ready()
的内容执行，而Firefox则是先执行$(document).ready()的内容，再执行原来的onload方法。这个和网上的说法似乎不完全一致
啊，呵呵，有点意思，好像越来越接近真相了。
翻翻jquery的源码看看$(document).ready()是如何实现的吧：
if (jQuery.browser.msie && window == top) (function () {
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch (error) {
setTimeout(arguments.callee, 0);
return;
}
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add(window, "load", jQuery.ready);
结果很明了了，IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执 行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。而 这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。
$(function(){
alert(0);
});
$(document).ready(function(){
alert(1)
});
(function ($) {
alert(2);
})(jQuery);
$().ready(function() {
alert(3)
});
js常见执行方法$(document).load(),$(document).ready()的更多相关文章
- js 将字符串当作js表达式执行方法
听同事说了一个需求.他有一个数据对象obj,接口会给他返回一个索引key,这个key长度不固定,根据这个key去修改obj对应的值. 举个例子: let obj={"level1" ...
- js常见执行方法window.onload = function (){},$(document).ready()
1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...
- js常见的方法
Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ ...
- 【javascript的那些事】等待加载完js后执行方法
很多时候,你也许会碰到 使用的情景: js文件b.js还没有从服务器端加载到web端,而吧a.js中已经调用了b.js中的方法 实例: 这里是加载echart的时候碰到的具体实例 引入js " ...
- javascript总结1:js常见页面消息输出方式 alert confirm console prompt document
.1 js常见的输出方法: 1-1 alert 警告框 alert("js语法总结"); 1-2 confirm 确认方法 confirm("js语法总结"); ...
- js自执行函数的常见写法
js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
- js 立即执行函数定义方法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JQuery缓冲加载图片插件lazyload.js的使用方法
lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- RunLoop机制理解
一.浅识RunLoop RunLoop在开发中我们一直在用,但是没有注意他.要想理解RunLoop,首先我们需要先了解一下程序运行机制. 程序运行机制:我们都知道OC是运行时语言,也就是说对象的类型是 ...
- jhljx跑跑跑（找规律）
题目来源:https://biancheng.love/contest/41/problem/D/index jhljx跑跑跑 题目描述 数学不好的jhljx又在和别人打牌,他们一共m人每人n张牌,牌 ...
- eclipse创建本地maven
一.下载maven安装包和maven的eclipse插件 apache-maven-3.3.9-bin.zip eclipse-maven-plugin.zip 下载地址:http://pan.bai ...
- C++中的常量折叠
先看例子: #include <iostream> using namespace std; int main() { ; int * p = (int *)(&a); *p = ...
- 安全初始化MySql服务器
我们在安装完MySql服务器,设置好MySql的root用户密码后,就直接开始使用了,其实这样的MySql服务器还存在着一些不安全因素, 本篇演示一下用命令mysql_secure_installat ...
- MySQL单机多实例安装并配置主从复制
单机多实例据说可以最大程度提高硬件使用,谁知道呢,但是以前的公司喜欢这样搞,我最近也在学习复制什么的,电脑搞不起两台虚拟机,刚好单机多实例可以解救我.下面就说说步骤. 承上文http://www.cn ...
- kettle初探
Kettle是Pentaho的一个组件,主要用于数据库间的数据迁移,到我用过的4.2版,还不支持noSQL,不知道4.4是不是支持了. Kettle自己有三个主要组件:Spoon,Kitchen,Pa ...
- 烂泥：【解决】Ubuntu下使用SSH连接centos系统很慢
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天在Ubuntu下使用SSH连接centos系统,发现连接很慢.建议一个连接大约需要30s.很是坑爹,如下: 后来查询相关资料,发现这个是Ubunt ...
- linux指定账号下配置单独的jdk版本
1.下载tar.gz格式的安装包,上传到服务器,并解压,本例使用jdk-7u79-linux-i586.tar.gz 2.进入指定账户的目录下, vi .bashrc,添加环境变量并保存: ...
- OO的设计原则
今天同事和我们一起讨论分享了OO的设计原则,讨论使人明晰,有人一起讨论学习是一件幸福的事情. 1.开闭原则 对功能的扩展是开放的,对修改是闭合的. 可以应用于类的设计,框架的设计等. 为什么?开闭原则 ...