美高梅官方网站66159web前端知识普及——页面加载

web前端知识普及—&mdash,广州电脑培训Java是一个广泛使用的网络编程语言,它是一种新的计算概念。首先,作为一种程序设计语言,它简单、面向对象、不依赖于机器的结构、具有可移植性、鲁棒性、安全性、并且提供了并发的机制、具有很高的性能。其次,它最大限度地利用了网络,Java的小应用程序(applet)可在网络上传输而不受CPU和环境的限制。另外,Java还提供了丰富的类库,使程序设计者可以很方便地建立自己的系统。;页面加载,如果大家想继续看下面的内容的话,有一个要求,就是回答我一个问题:你这样写过代码吗?window.onload
= function(){ $(“.gravatar”).on(‘click’,function(){ //… });
//以及其他操作DOM的节点}如果答案是 yes. 那么,bingo,
这里我们将深入讲解,这样写代码到底有没有IQ。如果答案是 No.
那么,2333333, 你也可以看一下。
万一哪天用上了呢?可能会有童鞋反问,那么,我改怎么写呢?没错,这里就是说的就是这个。使用过jquery的童鞋,应该知道有一个叫做ready的方法.即:$(document).ready(function(){
//操作DOM相关 //…})那这个和上面的写法有什么区别呢?
谁比较好一点呢(指性能)?wait wait wait ~这问题有点多诶。 不急。 想想看,
jquery老大哥 就是帮你
提高性能的,肯定是下面那种好呢。Why?原因我们接着说.页面加载页面加载就是从你输入网址+enter开始,发生的一些列过程,最终到页面显示。
从微观上分的话,页面加载有两部分一个是以DOMContentLoaded触发为标志的DOM树的渲染完成一个是以辅助资源img,font加载完成为触发标志的onload事件他们两个的具体区别就是”资源的加载”这个关键点.在获得数据响应后,页面开始解析,发生的过程为:(1)
解析HTML结构。(2) 加载外部脚本和样式表文件。(3) 解析并执行脚本代码。(4)
构造HTML DOM模型。//ready执行(5) 加载图片等外部文件。(6)
页面加载完毕。//load执行其实,说到这里,这篇文章就已经结束了。想得美。这只是,页面加载很浅的一块,前端能在页面加载上做的工作其实超级多。
要知道, 从你输入网站 +
enter键后,发生的过程为:重定向=>检查DNS缓存=> DNS解析 =>
TCP连接 => 发请求 => 得到响应=> 浏览器处理 =>
最后onload你可以数一数,前文的页面加载和这里的页面加载的范围到底是怎样的一个区别.
也就是说上文的页面加载其实 只算是浏览器处理=> 最后onload这一过程。
懂吧。
很小很小。所以,这里我们先从宏观上来讲解一下,页面加载的整个流程.宏观页面加载这样,干讲页面加载真的很没趣诶,
又没有吃的,又没有程序员鼓励师,又没有leader的加薪,凭借的是队长的满腔热情
和 对技术的执着。 感动吧~

本文章来给各位同学介绍jquery中$(document).ready()和onload用法详解介绍,包括有加载顺序与区别等基础方法,大家可参考。

<b>一、DOM文档加载的步骤为:</b>

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页
面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload
前加载!!!)
一般样式控制的,比如图片大小控制放在onload 里面加载;

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

jS事件触发的方法,可以在ready 里面加载;
用jQ的人很多人都是这么开始写脚本的:
通常的写法

<b>二、区别</b>

 代码如下

  1. 执行时间不同

复制代码

  • window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

  • $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

  • 在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
    //原生js写法
    document.addEventListener(“DOMContentLoaded”, function() {
    // …代码…
    }, false);

      window.addEventListener("load", function() {
      // ...代码...
      }, false);
    

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

  1. 编写个数不同

其实这个就是jq ready()的简写,他等价于:

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

 代码如下

3 简化写法

复制代码

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

$(document).ready(function(){
//do something
})

4 jquery写法

也等于下面这个方法,jQuer的默认参数是:“document”;

//Jquery 代码如下: 
$(window).load(function (){ 
// 编写代码 
});等价于 JavaScript 中的以下代码 
Window.onload = function (){ 
// 编写代码 
}

 代码如下

复制代码

$().ready(function(){
//do something
})

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载
在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
加载 多个函数的问题
■<body onload=”a();b();”>
</body>
在Onload事件中 只能这样加载,很丑陋…
■而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行
代码和内容不分离
这个貌似不用说了,让人深恶痛绝-.-!!◦ 执行先后顺序不同
■对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很
长时间.

而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这
个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.

 代码如下

复制代码

<script type=”text/javascript”>
$(window).load(function() {
alert(“hello”);
});
$(window).load(function() {
alert(“hello again”);
});
</script>

上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法

 代码如下

复制代码

<script type=”text/javascript”>
$(window).unload(function() {
alert(“good bye”);
});
</script>

上面代码会在页面关闭时引发.
在 所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的,有时候开发的时候也用这种方法

 代码如下

复制代码

<body>
<script type=”text/javascript”>
(function() {
alert(“hi”);
})(jQuery)
</script>
</body>

对,
就是利用js闭包的形式将js代码嵌入body,这段代码会自动执行,当然也可以直接嵌入js代码,这种方式要注意顺序问题,如下:

 代码如下

复制代码

<body>
<div id=”test”>this is the content</div>
<script type=”text/javascript”>
alert($(“#test”).html());//I Can display the content
</script>
</body>
<body>
<script type=”text/javascript”>
alert($(“#test”).html());//I Can’t display the content
</script>
<div id=”test”>this is the content</div>
</body>

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

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

1.执行时间

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

2.编写个数不同

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

3.简化写法

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

 以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 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 );

页面加载完成有两种…

Leave a Comment.