js 实现onload
在JavaScript中实现onload事件
使用window.onload可以在页面完全加载后执行代码。这包括图像、样式表等资源的加载完成。
window.onload = function() {
console.log('页面已完全加载');
};使用addEventListener方法
现代JavaScript推荐使用addEventListener，因为它允许添加多个事件监听器而不会覆盖之前的。
window.addEventListener('load', function() {
console.log('页面加载完成');
});针对特定元素的onload
可以为图片等元素单独设置onload事件，在元素加载完成后触发。
const img = new Image();
img.onload = function() {
console.log('图片加载完成');
};
img.src = 'image.jpg';动态脚本的onload
加载外部脚本时，可以使用onload来确认脚本已加载完成。
const script = document.createElement('script');
script.onload = function() {
console.log('脚本加载完成');
};
script.src = 'script.js';
document.head.appendChild(script);使用DOMContentLoaded事件
如果只需要DOM结构加载完成而不等待资源，可以使用DOMContentLoaded事件。
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM已加载完成');
});注意事项
window.onload会等待所有资源加载完成，可能导致执行延迟。DOMContentLoaded触发更早但不等资源。根据需求选择合适的事件。
