jquery $(document).ready() 与window.onload的区别

转载博客:http://www.jb51.net/article/21628.htm

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

1.执行时间 

        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
        $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

2.编写个数不同 

         window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
         $(document).ready()可以同时编写多个,并且都可以得到执行 

3.简化写法 

         window.onload没有简化写法 
         $(document).ready(function(){})可以简写成$(function(){});

在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

$(document).ready(function(){
...
});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就需要用到:

$(window).load(function() {
$("#btn-upload").click(function(){   //比如说:
 uploadPhotos();
});
});

下面是转载的内容,
用$(window).load(function(){...})而不用body.onload()的几个理由
首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.

不用body.Onload()理由1:

如果我们想同时加载多个函数,我们必须这样写

<body οnlοad="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数

 $(window).load(function() {alert("hello,我是jQuery!");});$(window).load(function() {alert("hello,我也是jQuery");});

这样写它会从上往下执行这两个函数,并且看起来漂亮多了.

不用body.Onload()理由2:

用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.

另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容

加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常

会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,

所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){}),因为他会在页面的dom元素加载完毕后就执行,

而无需等到图片或其他媒体下载完毕.

但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是

该使用$(function(){})往往需要结合具体需要而作不同的选择.

最后附上一段在所有DOM元素加载之前执行的jQuery代码

<script type="text/javascript">
(function() {alert("DOM还没加载哦!");})(jQuery)</script>

呵呵,有时候我们也有这个需求!

以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

 window.load  $(document).ready()  

执行时机  必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行  网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完  
编写个数  不能同时编写多个 
以下代码无法正确执行: 

window.onload = function(){ alert(“text1”); 
}; 
window.onload = function(){ alert(“text2”); 
};

结果只输出第二个  能同时编写多个 
以下代码正确执行:

$(document).ready(function(){ alert(“Hello World”); 
}); 
$(document).ready(function(){ alert(“Hello again”); 
}); 

结果两次都输出  
简化写法  无 

$(function(){ // do something 
}); 

另外,需要注意一点,由于在 $(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绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。

以上就是本文的全部内容,了解更多jQuery的语法,大家可以查看:《jQuery 1.10.3 在线手册》,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小学三年级上册计算机计划,小学三年级数学上册教学计划

小学三年级数学上册教学计划一、班级情况分析这一学期我继续担任三年级数学教学工作&#xff0c;本班现有学生9人&#xff0c;其中男生3人&#xff0c;女生6人。三年级学生已经有两年的数学学习经历&#xff0c;对一些基础性的数学知识有了初步的认识。学生已经比较习惯于新教材…

centos7查看当前cpu运行模式_杂集:centos7中设置服务开机自启的两种方法,欢迎补充...

前言&#xff1a;在日常使用linux系统过程中&#xff0c;安装服务后系统不会自动启动服务的。就算手动启动了服务&#xff0c;只是当前生效&#xff0c;一旦服务器重启后&#xff0c;系统不会自动启动这些服务。如果每次重启服务器都要自己手动启动这些服务&#xff0c;一台还阔…

Sort HDU5884(二分+多叉哈夫曼树)

HDU5884 Sort 题意&#xff1a;有n个序列要进行归并&#xff0c;每次归并的代价是两个序列的长度的和&#xff0c;要求最终的代价不能超过规定的T&#xff0c;求在此前提下一次能同时进行归并的序列的个数k。 思路&#xff1a;还是太单纯&#xff0c;看完题目一直以为要用归并排…

python来源是什么_python起源?为什么使用python?直至爱上python的五个理由

原标题&#xff1a;python起源&#xff1f;为什么使用python&#xff1f;直至爱上python的五个理由Python的创始人&#xff0c;吉多范罗苏姆&#xff0c;是一名荷兰计算机程序员&#xff0c;他作为 Python 程序设计语言的作者而为人们熟知。在 Python 社区&#xff0c;吉多范罗…

Linux系统(五)负载均衡LVS集群之DR模式

序言 DR模式是lvs集群中三种负载均衡模式的其中一种&#xff0c;那么上一篇中我写啦关于NAT模式的搭建与原理&#xff0c;为什么还要有DR模式与IP隧道模式呢&#xff1f; 首先我们来看3张图。LVS/NAT模式如下图&#xff1a; LVS/IP隧道模式&#xff0c;如下图&#xff1a; LVS/…

Redux API之applyMiddleware

applyMiddleware(...middlewares) 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式。Middleware 可以让你包装 store 的dispatch 方法来达到你想要的目的。同时&#xff0c; middleware 还拥有“可组合”这一关键特性。多个 middleware 可以被组合到一起使用&a…

计算机2018创业方向,推荐2018年创业的方向

原标题&#xff1a;推荐2018年创业的方向1 新电商传统的零售业收到互联网电商的重冲击&#xff0c;从而进行线上线下的结合是必然的趋势&#xff0c;新零售&#xff0c;新电商&#xff0c;是几千万零售企业成功转型的必然之路&#xff0c;学习一套全面的新电商转型的方法&#…

包无法安装_详细教程 | 安装Python编程环境以及使用OpenpyXl操作Excel

详细教程 | 安装Python编程环境以及使用OpenpyXl操作Excel注意&#xff1a;下列教程为 Windows7 64位&#xff1b;Windows 10有部分步骤有差异&#xff0c;请参考使用&#xff01;01 下载Python程序安装包首先前往Python官网 www.python.org,进入官网点击 Downloads,然后点击 W…

Activity、Fragment、Dialog基类简单整理

版权声明&#xff1a;本文为HaiyuKing原创文章&#xff0c;转载请注明出处&#xff01; 概述 这里简单记录下Activity、Fragment、Dialog基类中的常规写法&#xff0c;后续根据项目需求进行相应的扩展。 BaseActivity.java package com.why.project.myapptemplet.activity;impo…

request重定向_golang不想http自动处理重定向的解决方案

前言有时候发送http请求不想让库自动帮忙处理重定向&#xff0c;库里面默认的是会把所有重定向都完成一遍&#xff0c;结果就是最后一个没有重定向的请求的结果。因此需要一种方案直接获取首次访问的结果&#xff0c;不走重定向。go的http库里面是使用如下代码检查重定向的&…

C语言项目开发-项目架构和编程命名规范

一个项目的流程&#xff1a;1、公司市场人员与客户交流&#xff0c;了解客户、引导客户使用公司最优资源并产出一份市场需求文档 2、公司需求人员&#xff08;BA&#xff09;与客户交流&#xff0c;了解客户需求并产出一个软件需求文档 3、项目经理、开发小组成员、需求人员&am…

ajax登录验证的原理,ajax用户登录验证-get和post提交方式,与工作原理—2018-8-15...

ajax用户登录验证&#xff1a;实例html>Ajax实战:表单验证用户登录邮箱: 密码: 提交let btn document.getElementsByTagName(button)[0];btn.onclick function () {//1.创建xhr对象let xhr new XMLHttpRequest();//2.监听响应状态xhr.onreadystatechange function(){// …

将Python脚本打包成可执行文件

Python是一个脚本语言&#xff0c;被解释器解释执行。它的发布方式&#xff1a; .py文件&#xff1a;对于开源项目或者源码没那么重要的&#xff0c;直接提供源码&#xff0c;需要使用者自行安装Python并且安装依赖的各种库。&#xff08;Python官方的各种安装包就是这样做的&a…

float foo=42e1为什么错_为什么重写了equals()也要重写hashCode()

小Hub领读&#xff1a;虽然是很基础的一篇文章&#xff0c;但是对于equals、hashcode两个方法&#xff0c;相信很多人都与其中的规则不熟悉&#xff0c;来跟着小Hub花个8分钟回顾一下&#xff01;作者&#xff1a;不学无数的程序员https://my.oschina.net/u/4030990/blog/31341…

ssh客户端_一款基于TAS框架的SSH客户端蠕虫

TEA是一款基于TAS框架的SSH客户端蠕虫&#xff0c;从本质上说&#xff0c;它是一个仿冒的SSH客户端&#xff0c;它能够修改tty输入/输出来实现任意命令执行&#xff0c;或通过SSH连接来上传自身以实现渗透感染。为了实现该工具的正常功能&#xff0c;远程主机需要满足以下条件&…

Selenium入门11 滚动条控制(通过js)

这一节要有js基础。做web端的UI自动化必须要有html&#xff0c;css&#xff0c;javascript前端基础。 滚动条控制&#xff1a; 1 移动垂直滚动条 document.documentElement.scrollTop 2 移动垂直滚动条 document.documentElement.scrollLeft 3 找到某个元素&#xff0c;移动到可…

Qt之QNetworkInterface

简述 QNetworkInterface类负责提供主机的IP地址和网络接口的列表。 QNetworkInterface表示了当前程序正在运行时与主机绑定的一个网络接口。每个网络接口可能包含0个或多个IP地址&#xff0c;每个IP地址都可选择性地与一个子网掩码和/或一个广播地址相关联。这样的列表可以通过…

第二周计划

上周计划回顾 3.5 ~ 3.11 数据&#xff1a; 评师网爬取&#xff0c;完成&#xff1a;2k条记录 finished后端 数据结构 技术选型 学校API封装未完成&#xff1a;后端负责人出差 工作暂停产品 功能设计&#xff1a;主要功能提交&#xff1a;原型图 几个页面 每个页面大概功能完成…

python编程软件排行榜_PYPL 9月编程语言排行榜发布 Python一枝独秀

开发者可以将 PYPL 作为一个参考&#xff0c;决定学习何种语言或 IDE&#xff0c;或者在新的软件项目中使用何种语言或数据库。9 月份的榜单如下&#xff1a;前五名分别是 Python、Java、JavaScript、C# 与 PHP。相比去年 9 月份的数据&#xff0c;除了 Python 大幅上涨了 4.5%…

分享到系统面板_win7电脑没有nvidia控制面板怎么办【解决方法】

我们在使用电脑的时候&#xff0c;当电脑显卡出现问题导致屏幕画面不清晰时&#xff0c;可以使用win7系统自带nvidia控制面板&#xff0c;它能够对显卡进行设置&#xff0c;提升显卡功能&#xff0c;不过很多电脑用户点击nvidia控制面板时却提示nvidia显示设置不可用&#xff0…