初始化加载

一：jquery 和 js 初始化加载的区别

一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

js （Dom Load）:指示页面包含图片等文件在内的所有元素（整个document文档）都加载完成。

js是页面全部加载完成才执行初始化加载。js中的window.onload是等页面加载完所有的元素，包括图片等等资源要全部加载成功后才执行
特例

document.getElementById("imgID").onload=function(){
     //do something
}

jquery （Dom Ready）:表示文档结构已经加载完成（不包含图片等非文字媒体文件）

等待页面加载完数据，以及页面部分元素（不包括图片、视频）。在DOM加载完成后就可以可以对DOM进行操作。

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

二：js和jquery页面初始化加载函数的方法及先后顺序

运行下面代码。弹出A、B、C、D、E的顺序：A=B=C>D=E=F。

<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script>

$(function()
{
    alert("A");
});

$(document).ready(function(){
    alert("B");
});

jQuery(function($) {  
    alert("C");  
});

loads();
function loads(){
    alert("D");
};

window.onload=function(){
    alert("E");
};

$(window).load(function() {
   alert("F");
});


</script>
<body onload="loads();">
</body>
</html>

三、用`$(window).load(function(){...})`而不用`body.onload()`的几个理由

1、如果我们想同时加载多个函数,我们必须这样写
<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数

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

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

四、所有DOM元素加载之前执行的jQuery代码

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

IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。