关于前端加载的运用有两种形式：一、DOM树加载完成后使用，ready()；二、页面完全加载后使用，onload、load()。
了解：
HTML DOM文档加载顺序：
1、解析HTML结构
2、加载外部脚本和样式表文件
3、解析并执行脚本代码
4、构造HTML DOM模型
5、加载图片等外部文件
6、页面加载完毕
ready() 方法是在页面完成HTML的加载并建立了DOM树之后开始执行；
onload 事件、load()方法是整个页面已经加载完毕后执行，包括图片等一些关联文件。
使用：
一、ready() 方法(ready() 方法不应该与 <body οnlοad=""> 一起使用。）
1、原生JavaScript中并没有提供 document.ready方法，需要自己定义，比较复杂，所以很少见。写法如下：
document.ready=function(){
alert("ready");
};
2、jQuery中的三种写法如下(常用)：
$(document).ready(function(){ alert("ready"); });
或 $(function(){ alert("ready"); });
或 $().ready(function(){ alert("ready"); });
！ 注意：ready() 函数仅能用于当前文档，无需选择器，document选择器可以不要，那么就可以写成：$().ready(function(){});
最后$的默认事件就是ready，所以，ready也可以省略，写成：$(function(){});
二、onload 事件、JQuery–load()方法
1、在 HTML 中(常用):onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
<body onload = " myFunction() "> </body>
也可用于图片标签中<body> <img src = "logo.png" οnlοad="loadImage()" width="336" height="36"> </body>
2、在 JavaScript 中:
window.onload = function(){ alert("onload"); };
3、在 JQuery 中没有定义onload事件，由Load()方法实现:
$(window).load(function(){
alert("onload");
});
！ 注意：load() 方法在 jQuery 版本 1.8 中已废弃。
！！还存在一个名为 load() 的 jQuery AJAX 方法。根据不同的参数决定调用哪个方法。
总结：
推荐使用：
DOM树加载完成后：$(document).ready(function(){ alert("ready"); });
页面加载完成后：<body onload = " myFunction() "> </body>
特别注意！
JQuery的$(document).ready()、$(window).load()都可以出现多次，并且里面的函数或者代码都可以执行。
$(window).load()在$(document).ready之后执行，且页面中所有内容全部加载完成后才会执行。
扫一扫
3003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
