要实现原生JS在DOM加载完成后马上执行代码，可以使用DOMContentLoaded事件或window.onload事件。
1. 使用DOMContentLoaded事件
DOMContentLoaded事件会在DOM文档加载完成后立即触发，不必等待图片、样式等资源的加载完成。它适合在页面中引用的JS代码不依赖于其他资源的时候使用。
事件监听代码如下：
document.addEventListener('DOMContentLoaded', function(event) {
// 执行需要在DOM加载完成后立即执行的代码
});
示例一：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM加载完成后立即执行的代码');
});
</script>
</body>
</html>
示例二：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<script src="script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
// 这里不能直接写在外部的script.js文件中，因为它可能依赖于其他资源
console.log('DOM加载完成后立即执行的代码');
});
</script>
</body>
</html>
2. 使用window.onload事件
window.onload事件会等待DOM文档及所有资源的加载完成后触发。它适合在页面中引用的JS代码依赖于其他资源（如图片）的时候使用。
事件监听代码如下：
window.onload = function(event) {
// 执行需要在DOM及资源全部加载完成后才能执行的代码
};
示例一：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
<style>
img {
display: none;
}
</style>
</head>
<body>
<script>
window.onload = function(event) {
console.log('DOM及资源全部加载完成后才执行的代码');
};
</script>
<img src="image.png" alt="" />
</body>
</html>
示例二：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<script src="script.js"></script>
<script>
window.onload = function(event) {
// 这里可以写在外部的script.js文件中，因为它依赖于其他资源
console.log('DOM及资源全部加载完成后才执行的代码');
};
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现DOM加载完成马上执行JS代码的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 