作者：无视一个水阿哥_470 | 来源：互联网 | 2023-10-11 16:13
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=">
<title>jQuery-v1.9.0title>
<script src="/html/commonjs/jQuery-v1.9.0.js">script>
<style>
html,
body {
margin: 0;
padding: 0;
}
style>
head>
<body>
<pre>
ready和onload事件区别
1、document.ready 事件在DOM结构绘制完成之后就会执行，这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。
2、window.onload 事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：
网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。
window.onload 和 jquery(document).ready(function() {})的区别：
1、$(function(){})：在Dom节点创建完成后就执行，如果有多个定义则依次执行。
2、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个。
3、$(function(){})在window.onload前执行。
通常一个页面加载的顺序是，域名解析——加载html——加载js和css——加载图片等其他信息。
DOM文档加载的步骤：
1.解析HTML结构
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.DOM树构建完成。会触发DOMContentLoaded -- ready
5.加载图片等外部文件。
6.页面加载完毕。会触发window.load
IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件
pre>
<img id="imgId" src="../html/img/小鲁班.png" alt="" srcset="">
body>
<script>
// document对象
document.ready = function() {
console.log(‘表示文档结构已经加载完成--不包含图片等非文字媒体文件‘)
}
// window对象
window.onload = function() {
console.log(‘表示页面包含图片等文件在内的所有元素都加载完成‘)
}
// 选择器 跟踪 图片的加载
document.getElementById("imgId").onload = function(){
console.log(‘图片加载完成‘)
}
// 三种jquery方式，其实是同一种方式
$(document).ready(function() {
console.log(‘jquery1: 表示文档结构已经加载完成--不包含图片等非文字媒体文件‘)
})
$().ready(function() {
console.log(‘jquery2: 表示文档结构已经加载完成--不包含图片等非文字媒体文件‘)
})
$(function() {
console.log(‘jquery3: 表示文档结构已经加载完成--不包含图片等非文字媒体文件‘)
})
script>
html>
京公网安备 11010802041100号