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的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- RHEL7软件包管理
本文介绍RHEL7的软件包管理 RHEL7下主要有RPM和YUM这两种包管理: YUM使用简单但需要联网,YUM会去网上的YUM包源去获取所需要的软件包并获取该包依赖的其他包 RPM的需要的操作精度比 ...
- jQuery.merge()
jQuery.merge( first, second ) //返回Array 合并两个数组内容到第一个数组. first第一个用来合并的数组,元素是第二数组加进来的. second第二个数组合并到第 ...
- AX2012 R3 Data upgrade checklist sync database step, failed to create a session;
最近在做AX2012 R3 CU9 到CU11的upgrade时 (用的Admin帐号), 在Date upgrade 的 synchronize database 这步 跑了一半,报出错误 说“fa ...
- C#获取本地系统日期格式
我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...
- android 类ios actionsheet效果
1.http://blog.csdn.net/zhaoxy_thu/article/details/17733389 2. https://github.com/ojhariddhish/action ...
- Android 网络编程基础之简单聊天程序
前一篇讲了Android的网络编程基础,今天写了一个简单的聊天程序分享一下 首先是服务端代码: package com.jiao.socketdemo; import java.io.Buffered ...
- iOS开发之网络编程--XCode7 更新以来需要手动设置的内容
XCode7 更新以来,默认是不允许加载一些http网络请求,是因为现在网络大部分使用更安全的https协议头. 所以,iOS网络编程如果出现请求无效,事先考虑是否设置一下了以下操作:
- UI交互设计的网站
1.http://www.xueui.cn/other-tutorials/ui-interaction-design.html 2.http://www.3lian.com/edu/2015/12- ...
- SQL 在表中随机取数据
在一张10万行产品表(Product)中,随机取10条数据的几种方式: SET STATISTICS IO ON SELECT TOP 10 ID FROM dbo.Product(NOLOCK) W ...
- [转]个人源码管理：如何在本机配置自己的SVN Repository (图解)
本文转自:http://blog.csdn.net/wikijava/article/details/6245588 Repository 即源码的集中存放处,所有修改后提交的源码就是保存在这里,并在 ...