js初始化方式

总结:

ready:等页面中所有的dom节点加载完成就触发,无需等样式表css、图片、iframes加载完。

load:是在文档的所有资源都被加载完成后触发执行,包括 JS,CSS,文档里面的所有的图片,多媒体内容等。

onload 触发的会比 dom ready 慢,会在ready的后面加载。

// 1、语法:
$().ready( function() {
    // ......
}); 




// 2、语法:
$( document ).ready( fuction() {
    // ......
}); 
// (JS简化写法):
$( function() {
     // ......
});




// 3、语法:
$(window).load(function(){
    ......
}); 
// 3.0以前的写法,高版本中已被废弃,可使用下面形式来代替
$( window ).on( 'load', function() {
    ......
});



// 4、语法:
window.onload = function(){
    ......
};

/**********************************************************************************************************/

ready:页面中的所有DOM结构加载完成时执行。

解析:

ready监听的是DomContentload 事件,DomContentload 事件将在DOM层次结构完全构建后立即触发, 即等页面中所有的dom节点加载完成就触发,无需等样式表css、图片、iframes加载完


不需要等待样式表,图片和 iframes 加载完,也就是说当这个事件触发的时候,你就可以通过 JS 获取所有你 html 里的节点了。
在大多数情况下,只要DOM结构已完全加载时,脚本就可以运行。传递处理函数给.ready()方法,能保证DOM准备好后就执行这个函数。


一个页面中同时出现多个$(function(){})或$(document).ready(function(){})时,所有包含在内的数据逻辑都会被执行,但是除了第一个是按照顺序初始化执行以外,其他出现的初始化代码段则是按照代码的执行顺序随机执行

/**********************************************************************************************************/

load:是在文档的所有资源都被加载完成后触发执行。

解析:

load事件是当页面完全呈现时执行,包括 JS,CSS,文档里面的所有的图片,多媒体内容等等(所以 onload 触发的会比 dom ready 慢,会在ready的后面加载)。

如果执行的代码需要在元素被加载之后才能使用时,就需要将这样的代码放到 load 事件中。(例如,取得图片的大小需要在图片被加载完后才能知道)

一个页面中同时出现多个window.οnlοad=function(){} 时会忽略前面的而执行最后一个

$(window).load() 和window.οnlοad=function(){}  

相似是:页面中的所有元素(包括图片、flash)等都加载完毕后才能执行

区别是:前者可以和$(document).ready()一样,可以同时加载多个函数。




 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值