解析页面加载与js函数的执行 onload or ready
页面加载过程
当浏览器加载一个页面时，会按照以下步骤逐步完成页面的加载：
- 浏览器通过DNS解析获取目标网站的IP地址
- 浏览器向服务器发出请求，获取HTML文件
- 浏览器开始解析HTML，构建DOM树
- 遇到CSS和JS文件时，浏览器会解析它们，并执行其中的代码
- 解析完成后，浏览器构建出渲染树
- 渲染树和DOM树进行合并，生成最终的页面
JS函数的执行
JS代码在上述第四步会被加载并执行，可通过两种方式来确保JS函数在DOM加载完成后才会执行：onload和ready。
window.onload
window.onload事件表示在网页中的所有元素加载完毕后才会执行，包括图像、嵌入的对象、样式表等。当HTML页面在浏览器窗口中完全渲染，并且所有依赖的资源都已经下载好后，window.onload事件才会被触发。
例如，在以下代码中，在页面以及所有图片都加载完成后，弹出”页面加载完成“的提示框：
window.onload = function() {
alert("页面加载完成");
};
$(document).ready()
$(document).ready() 是 jQuery 提供的工具，可在 HTML 文档加载完成后进行调用。它表示文档已经加载完毕，并且HTML结构已解析完成，但并不表示所有的嵌入式资源已经加载成功。
例如，在以下代码中，当Dom树以及所有脚本、图片都装载完成之后，弹出”Dom树加载成功“的提示框：
$(document).ready(function() {
alert("Dom树加载成功");
});
示例说明
示例一
设计一个网站，当用户将GIF图片复制到文本框中时，在新标签页中播放该GIF图。GIF图片在HTML中为img标签，播放GIF需要调用其他JS库。如何确保JS函数不会在HTML解析过程中被执行？
- 将img标签包含在一个默认隐藏的div元素中，防止图片加载时对页面渲染的影响。
- 在HTML页面底部调用JS库，并确保在dom树全部渲染完成后调用该库。
- 使用$(document).ready()函数将用户输入的文本框与JS脚本绑定。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态播放GIF图片</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<form>
<input type="text" id="gif-input" placeholder="输入GIF图片地址">
<input type="button" value="播放" onclick="playGif()">
</form>
<div class="hidden" id="gif-container">
<img id="preview" />
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
document.getElementById('gif-input').oninput = function () {
document.getElementById('preview').src = document.getElementById('gif-input').value;
$('#gif-container').show();
}
});
function playGif() {
window.open('viewer.html?image=' + encodeURIComponent(document.getElementById('gif-input').value));
}
</script>
</body>
</html>
示例二
设计一个网站，当用户点击一个按钮时，弹出画布，在画布上显示一个可移动的小球。如何确保小球画布在HTML加载完成后被渲染？
将JS代码包含在window.onload函数中，防止代码在页面加载过程中被执行。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小球运动动画</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<button onclick="start()">开始</button>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var ball = {
x: 100,
y: 100,
vx: 5,
vy: 4,
radius: 25,
color: 'blue',
draw: function() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = this.color;
context.fill();
}
};
function start() {
setInterval(function () {
context.clearRect(0, 0, canvas.width, canvas.height);
ball.x += ball.vx;
ball.y += ball.vy;
if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
ball.vx = -ball.vx;
}
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.vy = -ball.vy;
}
ball.draw();
}, 16);
}
}
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：解析页面加载与js函数的执行 onload or ready - Python技术站
微信扫一扫 
支付宝扫一扫 