jquery加载页面

jQuery 加载页面内容的方法

使用 .load() 方法

通过 AJAX 请求加载远程数据并插入到指定元素中。适用于加载部分页面片段。

$("#targetElement").load("external.html #specificSection");

使用 $.get() 或 $.ajax()

动态获取 HTML 内容并手动插入到 DOM 中。提供更灵活的异步控制。

$.get("page.html", function(data) {
    $("#container").html(data);
});

结合 $(document).ready()

确保页面 DOM 完全加载后执行 jQuery 代码，避免操作未渲染的元素。

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

监听 window.onload 事件

等待所有资源（如图片）加载完毕后再执行脚本，适用于依赖完整页面渲染的场景。

$(window).on("load", function() {
    // 全部资源加载完成后执行
});

注意事项

• 跨域请求需确保目标服务器允许 CORS。
• 动态加载的内容可能需重新绑定事件委托。
• 大型文件加载建议添加加载状态提示。