JavaScript 页面自动加载事件详解
JavaScript 以其强大的交互性和动态性而成为 Web 前端开发中必不可少的一部分。在 Web 页面加载时，若有需要在页面中自动加载或动态生成内容的需求，可通过使用 JavaScript 页面自动加载事件来实现。
常用的 JavaScript 页面自动加载事件有两种：DOMContentLoaded 和 window.onload 。
DOMContentLoaded
在页面的 DOM 结构完全加载（不必等页面上的其它资源完全加载）、解析执行后，DOMContentLoaded 事件即会被触发。此时，页面显示完成前在页面中插入新元素不会使网页重构。
代码演示
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<h1>DOM Content Loaded</h1>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.body.style.backgroundColor = "lightblue";
document.body.innerHTML += "<h2>This is a dynamically created element using DOMContentLoaded event.</h2>";
});
</script>
</body>
</html>
在上面的例子中，当 DOMContentLoaded 事件被触发时，JavaScript 会将 body 的背景颜色更改为 lightblue 并向页面中插入一个 h2 元素，内容为“这是使用 DOMContentLoaded 事件动态地创建的元素。”。
window.onload
当整个页面和其它与之相关的资源（如图像、视频等）均被完全加载后，window.onload 事件才会被触发。
代码演示
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<h1>Window Load Event</h1>
<img id="pic" src="https://picsum.photos/200" alt="图片">
<script type="text/javascript">
window.onload = function() {
document.getElementById("pic").src = "https://picsum.photos/300";
};
</script>
</body>
</html>
在上面的例子中，当 window.onload 事件被触发时，JavaScript 会将 id 为“pic”的图片的 src 属性更改为一个更大的图片，分辨率为 300x300。
注意，尽管 window.onload 事件在页面完全加载后才会被触发，但这样的等待可能使用户感觉到页面加载速度缓慢。因此，在页面加载时，若使用 setTimeout 或 setInterval 函数延时加载或动态更新页面，能够有效提高页面加载的交互性和用户体验。
以上是 JavaScript 页面自动加载事件的详细说明。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javaScript 页面自动加载事件详解 - Python技术站
微信扫一扫 
支付宝扫一扫 