js页面加载的几种方式的速度: window.onload、 $(window).load、 $(function(){})、 $(document).ready(function () {})、on...

本文详细介绍了HTML页面中不同类型的加载事件触发时机的区别,包括原生JavaScript的window.onload和body.onload事件,以及使用jQuery库实现的多种加载事件。通过示例代码展示了这些事件的执行顺序及其在实际开发中的应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

</head>
<body onload="aaa()">
<div >
<p>hello world!</p>
</div>
<script type='text/javascript'>

window.onload = function(){
alert("页面加载完成====》onload");//速度次之使用jQuery对象,页面加载完毕【DOM tree + 外部图片 + 资源】
}

$(window).load(function(){
alert("jquery===》window load" ); //速度次之使用DOM对象,页面加载完毕【DOM tree + 外部图片 + 资源】
})
$(function(){
alert("jquery====》document onload");//速度并列第一,DOM结构加载完毕之后【浏览器把所有的HTML放入DOM tree之前就开始执行】
});
$(document).ready(function () {
alert("jquery====》document ready");//速度并列第一,DOM结构加载完毕之后【浏览器把所有的HTML放入DOM tree之前就开始执行】
});

function aaa(){
alert("静态标签====》onload"); //速度最慢,一般绑定在<body onload="aaa()">等待body加载完成,就会执行aaa()方法。但是与window.onload方法冲突,会造成在后面的覆盖前面的。二者只能存在一个。
}
</script>
</body>
</html>


操作前记得引入jq包。
一般我们在使用的时候,用的是:

$(function(){
  $("#a").click(function(){
    //adding your code here
  });
});

 




转载于:https://www.cnblogs.com/hfeng007/p/9133635.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值