Onload,Onunload,onbeforeunload,$(window).load(function() {})和$(document).ready(function(){})
Onload,$(window).load(function() {}):元素都加载完毕,才可以执行.
$(document).ready(function(){}):不一定要等所有的js和图片加载完毕,就可以执行.
我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如:
$(document).ready(function (){ alert(’use in page script tag’) });
$(document).ready(function (){ alert(’use in import js file’) });
现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.(原文地址:http://blog.csdn.net/lk188/article/details/4359346)
Onload,Onunload,onbeforeunload,$(window).load(function() {})和$(document).ready(function(){})的更多相关文章
- $(function(){}) ,$(document).ready(function(){}),window.onload = function(){...},$(window).load(function(){...})区别
1. 写法: $(function(){}) ,$(document).ready(function(){})是一样的 2. 时间: window.onload和$(window).load ...
- $(window).load(function() {})和$(document).ready(function(){})的区别
JavaScript 中的以下代码 : Window.onload = function (){// 代码 } 等价于 Jquery 代码如下: $(window).load(function ( ...
- jQuery的$(window).load与、(document).ready和window.onload的关系
jQuery的$(window).load与.(document).ready和window.onload的关系 $(function() { console.log('document.ready ...
- JQuery $(function(){})和$(document).ready(function(){})
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)二是onload,指 ...
- $(function(){})和$(document).ready(function(){}) 的用法
当文档载入完毕就执行,以下几种效果是等价的:1. $(function(){ //这个就是jQuery ready()的简写,即下2的简写 // do something }); 2. $(docum ...
- $(function(){})和$(document).ready(function(){})
document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...
- 转:jquery的$(function(){})和$(document).ready(function(){}) 的区别
原文链接:https://www.cnblogs.com/slyzly/articles/7809935.html [转载]jquery的$(function(){})和$(document).rea ...
- 比较body.onload(function())、$(document).ready(function())与$(windows).load(function)
原理对比: body.onload(function())是优先将document的DOM渲染,即将页面所有的元素(包括html标签以及所引用到的图片,flash媒体等媒体文件)加载完成,然后再执行页 ...
- $(window).on("load",function(){} 和 $(document).ready(function() {}
$(window).on("load",function(){ //页面属性,图片,内容完全加载完,执行 } $(document).ready(function() { 或者$( ...
随机推荐
- GSM cell phone calls use outdated encryption that can now be cracked with rainbow tables on a PC
Decrypting GSM phone calls Motivation. GSM telephony is the world’s most popular communication techn ...
- HDU4055 - number string(DP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4055 思路:dp[i][j]表示处理前i个字符以j结尾可能的序列数. 当a[i]=='I'时,dp[i ...
- Smart210---LED驱动
经过几天的学习,终于linux驱动的基本框架弄清楚了...真的很艰辛,,,不过终于还是熬过来了,虽然还是最基础的,,, 今晚也完成了我第一个linux驱动,,,心里还是有点小兴奋的,哈哈O(∩_∩)O ...
- magento首页调用最新产品
这个需要我们自己添加一个block块供我们调用,可参考new products的block类,建立文件app/code/core/Mage/Catalog/Block/Product/Special. ...
- LeetCode Search a 2D Matrix(二分查找)
题意: 有一个矩阵,每行都有序,每行接在上一行尾后仍然有序.在此矩阵中查找是否存在某个数target. 思路: 这相当于用一个指针连续扫二维数组一样,一直p++就能到最后一个元素了.由于用vector ...
- dedecms list 实现noflag
转自:http://blog.sina.com.cn/s/blog_7e53dd2b0101l3kq.html 替换include下arc.listview.class.php即可 经测试可行 但在更 ...
- JSONP解决ajax跨域问题
在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...
- ui学习笔记---第十五天数据库
数据库的使用 常见的数据库有MySQL SQL Server SQLite Oralce等 在iOS开发中通常使用SQLite数据库,这是一个轻量级的数据库,可以在火 ...
- Ubuntu下输入su - [root]后提示“su:认证失败”
Ubuntu下,进行用户到管理员切换时,使用命令su - 时,提示输入的是root密码,而在Ubuntu下root的密码起始是随机生成的(后续可由用户自己设置),且ubuntu下只能调用root,不能 ...
- Java-->类的成员
一.方法重载 在同一个类中,方法名相同.形参列表不同的两个多个方法之间构成重载!overload 调用方法的时候,是根据你传递的实参,来决定到底调用的是重载的哪个方法!!! 注意: 1.判断形参列表是 ...