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的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- elasticseach multi-field的实际用途
下面是multi-field的介绍: multi_field 多域类型允许你对同一个值以映射的方式定义成多个基本类型 core_types . 这个非常有用,比如,如果你定义一个 string 类型的 ...
- android XMl 解析神奇xstream 六： 把集合list 转化为 XML文档
前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...
- oc语言常用的字符串函数
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...
- 开源项目go2o - golang版的o2o项目
发一个github上唯一用golang实现的o2o项目 What's Go2o Golang combine simple o2o DDD domain-driven design realizati ...
- ubuntu 获取root权限
实验环境: ubuntu 13.04 背景:现在有一台装有 ubuntu 的电脑,如何获取root权限? 方案一:进入单用户维护模式,重置root密码. 方案二:U盘挂载原根分区,修改/etc/pas ...
- bsearch
在java中为了避免 low+high溢出,可以用无符号右移:正数高位补0,负数高位补1 int mid = (low + high) >>> 1; 如果是在c++中,那么需要先转换 ...
- ADO.NET Entity Framework，Code First简单示例
一.安装EntityFramework: 在vs里打开NuGet,在命令行里输入:Install-Package EntityFramework. 二.基本使用方法 1.建立数据模型 class St ...
- Servlet/JSP-01 Servlet及其生命周期
一.起步 1.新建一个类继承Servlet接口 public class HelloServlet implements Servlet { @Override public void destroy ...
- JAVA基础知识点：内存、比较和Final
1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题.(其中包括两部分) 分配:内存的分配是由程序完成的,程序员需要通过关键字new为每个对象申请内存空间(基本类型除外),所有的对 ...
- Spring自定义一个拦截器类SomeInterceptor，实现HandlerInterceptor接口及其方法的实例
利用Spring的拦截器可以在处理器Controller方法执行前和后增加逻辑代码,了解拦截器中preHandle.postHandle和afterCompletion方法执行时机. 自定义一个拦截器 ...