jquery页面加载

jQuery 页面加载事件

在 jQuery 中，页面加载事件通常通过 $(document).ready() 或简写的 $() 来实现。这种方式确保代码在 DOM 完全加载后执行，但无需等待图片等资源加载完成。

$(document).ready(function() {
    // DOM 加载完成后执行的代码
});

// 简写形式
$(function() {
    // 同上
});

与原生 JavaScript 的对比

原生 JavaScript 使用 window.onload 或 DOMContentLoaded 事件实现类似功能。window.onload 会等待所有资源（如图片）加载完成，而 DOMContentLoaded 仅需 DOM 结构就绪。

// 类似 jQuery.ready
document.addEventListener('DOMContentLoaded', function() {
    // DOM 加载完成后执行
});

// 等待所有资源加载
window.onload = function() {
    // 资源加载完成后执行
};

动态内容加载后的处理

若页面通过 AJAX 或动态操作加载内容，需使用事件委托或重新绑定事件。jQuery 的 on() 方法支持事件委托。

$(document).on('click', '.dynamic-element', function() {
    // 处理动态加载元素的点击事件
});

最佳实践

将脚本放在页面底部（</body> 前）可以减少对加载的阻塞。对于依赖 jQuery 的代码，确保 jQuery 库已优先加载。

<script src="jquery.min.js"></script>
<script>
$(function() {
    // 页面加载逻辑
});
</script>
</body>

多脚本加载顺序

若需在多个脚本中依赖页面加载事件，避免重复使用 $(document).ready()。可以通过模块化或合并逻辑来管理执行顺序。