jquery页面加载

jQuery页面加载的常用方法

使用jQuery时，页面加载可以通过多种方式实现，以下是几种常见的方法：

$(document).ready()

这种方法会在DOM完全加载后执行代码，但不需要等待图片等外部资源加载完成。这是最常用的jQuery页面加载方法。

$(document).ready(function() {
    // 在这里编写页面加载后要执行的代码
});

简写形式

jQuery提供了更简洁的写法，功能与$(document).ready()完全相同。

$(function() {
    // 在这里编写页面加载后要执行的代码
});

window.onload

与原生JavaScript的window.onload等效，会等待页面所有内容（包括图片）加载完成后再执行。

$(window).on('load', function() {
    // 在这里编写所有内容加载完成后要执行的代码
});

不同加载方法的比较

$(document).ready() vs window.onload

$(document).ready()在DOM树构建完成后立即执行，而window.onload会等待所有资源加载完毕。前者通常更快，后者更全面但可能延迟执行。

执行顺序

如果有多个$(document).ready()，它们会按照定义的顺序执行。而window.onload只会执行最后定义的函数。

最佳实践

对于大多数情况，使用$(document).ready()或其简写形式是最佳选择，因为它提供了良好的平衡：DOM可用但又不会等待所有资源加载。

对于需要操作图片尺寸或等待外部资源加载的场景，才需要使用window.onload。

现代JavaScript替代方案

随着现代JavaScript的发展，也可以使用原生方法替代jQuery的页面加载：

document.addEventListener('DOMContentLoaded', function() {
    // 相当于jQuery的$(document).ready()
});

这种方法不需要依赖jQuery，性能通常更好。