jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别)
耳听为虚,眼见为实。通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张大容量图片)
- <html>
- <head>
- <script type='text/javascript' src='jquery-1.3.2.min.js'></script>
- <script type='text/javascript'>
- $(document).ready(function(){
- alert("先加载DOM结构,再弹出对话框,后加载大型图片及内容");
- });
- //***************
- //window.οnlοad=function(){ alert("先加载DOM结构,后加载大型图片及内容,再弹出对话框");}
- //***************
- </script>
- </head>
- <body>
- <p>大量内容</p>
- <img src='aa.jpg'/>
- </body>
- </html>
说明: $(document).ready()是在DOM结构载入完后执行的,而window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完
所谓DOM加载完,就是指DOM模型加载完,也就是指代码加载完。
两者最大的区别,就是DOM加载完之后,不必再去等相应的图片加载完就可以执行JS代码了。
补充:(两者的具体用法)
window.onload用法
- <script type='text/javascript'>
- function winready(){
- document.getElementByIdx_x.('load').style.display='none';
- }
- window.οnlοad=winready; //或者window.οnlοad=function(){winready();}
- </scritp>
jquery用法:
- <script type='text/javascript'>
- $(document).ready(function(){
- $('#load').css('display','none');
- })
- </script>
来源于
http://blog.sina.com.cn/s/blog_5d95e3130100qlh6.html
虽然原生JS没有给我们提供ready方法,但我们也可以自己简单构建一个,尽管没有jQuery中那么强大,但也勉强够用。
- document.ready = function(fn) {
- // 标准浏览器中,我们监听DOMContentLoaded事件来判断DOM加载完毕
- if (document.addEventListener) {
- document.addEventListener("DOMContentLoaded", function() {
- document.removeEventListener("DOMContentLoaded", fn, false);
- }, false);
- }
- // IE中我们根据document.documentElement.doScroll("left")出错,来判断DOM加载完毕
- else {
- if (document.documentElement.doScroll && window == window.top) (function(){
- try {
- document.documentElement.doScroll("left");
- } catch (error) {
- setTimeout(fn, 0);
- return;
- }
- })();
- }
- }
<script language='javascript'>
document.ready(function(){
alert('Document is ready!');
});
</script>
打开页面,看到效果没?YES,这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery,但如果你的站点已经使用了 jQuery,就不用再多此一举了。
为保护作者版权,特此连接原文作者连接:http://www.vgot.net/?A65.htm
另外:经实践得知,两者都可以加载多个函数
另外还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段(由于字数限制,此处省略,详细的可看原文作者:http://www.vgot.net/?A65.htm )
其实 window.onload 也并非是一无用处,很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能,这样 window.onload 就可以提供一种“加载中”的功能,又或者是页面内容很少,完全无需 document.ready(); 根据各种情况,应该合理的使用 onload 和 ready。
通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如:
<script language="javascript">
window.onload = function () {
alert('Hello World!');
}
</script>
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload 的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM 已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的 HTML,这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready() 里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的 $(document).ready();
看代码:
- <script language='javascript'>
- (function () {
- var ie = !!(window.attachEvent && !window.opera);
- var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
- var fn = [];
- var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
- var d = document;
- d.ready = function (f) {
- if (!ie && !wk && d.addEventListener)
- return d.addEventListener('DOMContentLoaded', f, false);
- if (fn.push(f) > 1) return;
- if (ie)
- (function () {
- try { d.documentElement.doScroll('left'); run(); }
- catch (err) { setTimeout(arguments.callee, 0); }
- })();
- else if (wk)
- var t = setInterval(function () {
- if (/^(loaded|complete)$/.test(d.readyState))
- clearInterval(t), run();
- }, 0);
- };
- })();
- </script>
把这段代码放到你的页面中或者某个导入的脚本中,然后你就可以像下面这样使用了:
来源
http://hi.baidu.com/sch362017466/blog/item/fdbeb1ec148935dbb21cb172.html
jquery (js中window.onload与jquery中$(document.ready())的区别)相关推荐
- js中window.onload 与 jquery中$(document.ready()) 测试
js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系): &l ...
- 【js的window.onload和jquery的.ready()什么区别】
JavaScript中的window.onload和jQuery中的.ready()都是页面加载完成后执行的事件处理函数,用于在页面加载完成后执行一些JavaScript代码.它们之间的主要区别如下: ...
- JS中window.onload事件详解
window.onload出现的原因? 我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作.为了能够保证操作 ...
- 关于JS的window.onload与$(function (){})方法区别
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(function (){})==$(document).ready()是DOM结构绘制完毕后就执行,不必等到 ...
- JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势!
由于项目需要,使用JQuery也有相当一段时间了.由于经常要处理DOM节点加载.图片显示以及动态资源请求,所以对$(document).ready(function(){})理解也越来越深了,所有在此 ...
- js中innerHTML和innerText jQuery中html()和text()的区别
js中innerHTML和innerText的区别 innerHTML innerHTML 会将标签和标签中的内容否获取回来 innerHTML .innerHTML = '<p>&l ...
- 关于js中window.location.href、location.href 等如何跳转
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...
- 关于js中window.location.href,location.href,parent.location.href,top.location.href的使用方法
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...
- js中WINDOW对象中的location成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...
最新文章
- 【机器学习入门】(1) K近邻算法:原理、实例应用(红酒分类预测)附python完整代码及数据集
- couldn't find native method
- centos打显卡驱动命令_CentOS7显卡驱动问题
- redis 模糊删除实现
- Shiro的Base64和MD5加密的使用
- 寄生虫php版,-PHP版SEO最新教材版排名DeDeCms寄生虫V90繁殖
- SpaceX载人龙飞船Crew Dragon成功完成首飞返回地球!
- 【算法】剑指 Offer 17. 打印从1到最大的n位数
- mybatis(数据库增删改查)
- RS-485接口(上下拉电阻选择等)分析
- 华东师范大学《模式识别与机器学习》试题
- 正交性原理与维纳霍夫(正则)方程
- 机器学习算法入门介绍
- 各大媒体优劣对比_各种媒体的优缺点分析()
- 百度迟到移动互联网:寻入口级产品 文化成挑战
- 制作maven模板框架
- 导出excel换行问题,一个单元格多张图片问题,数组对象去重处理,计算属性传参
- Parcel 中文文档 | Parcel 中文网
- Docker快速入门总结笔记
- 【微电网优化】基于粒子群优化IEEE经典微电网结构附matlab代码