如何在jQuery中待仪表盘组件加载完成后再通过Ajax调用加载指定数据

问题描述 #

我需要实现这样的场景：仅当页面中的仪表盘组件完全加载完成后，再通过Ajax调用从API获取对应的数据，请问如何用jQuery实现？

解决方案 #

根据仪表盘组件的加载方式，分两种场景处理：

1. 仪表盘组件随页面同步加载 #

如果仪表盘是和页面DOM一起同步渲染的（无需额外异步请求或插件初始化），可以使用$(window).on('load')事件——这个事件会在页面所有资源（包括图片、样式、脚本）加载完成后触发，确保仪表盘已经完全就绪：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Page</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>  
</head>
<body>
<div>This Dashboard/Index page</div>
<div>Dashboard Widgets are loaded</div>
<script>
$(window).on("load", function() {
    // 仪表盘已完全加载，发起Ajax请求
    $.ajax({
        url: "/farmers/updateTaskAssignment",
        type: "GET",
        success: function(resp) {
            console.log("数据获取成功:", resp);
        },
        error: function(error) {
            console.log("请求失败:", error);
        }
    });
    console.log("页面所有资源加载完成，仪表盘已就绪");
});
</script>
</body>
</html>

2. 仪表盘组件是异步加载/渲染的 #

如果仪表盘是通过第三方插件（如ECharts、Highcharts）或异步接口动态渲染的，window.load无法准确捕捉组件就绪的时机，此时需要利用组件自身的加载完成回调或自定义事件：

示例1：利用第三方插件的回调（以ECharts为例）

// 初始化仪表盘组件
var myChart = echarts.init(document.getElementById('dashboard'));
myChart.setOption({/* 仪表盘配置 */});

// 监听仪表盘渲染完成事件
myChart.on('finished', function() {
    // 组件就绪，发起Ajax请求
    $.ajax({
        url: "/farmers/updateTaskAssignment",
        type: "GET",
        success: function(resp) {
            console.log("数据获取成功:", resp);
        },
        error: function(error) {
            console.log("请求失败:", error);
        }
    });
});

示例2：自定义加载完成事件

如果是自定义的异步渲染逻辑，可以在组件渲染完成后触发自定义事件，再监听该事件发起请求：

// 自定义仪表盘渲染函数
function renderDashboard() {
    // 模拟异步渲染逻辑（比如调用接口获取仪表盘配置）
    $.get("/dashboard/config", function(config) {
        // 渲染仪表盘的DOM/逻辑...
        console.log("仪表盘渲染完成");
        // 触发自定义事件
        $(document).trigger('dashboard:loaded');
    });
}

// 监听自定义事件，发起Ajax请求
$(document).on('dashboard:loaded', function() {
    $.ajax({
        url: "/farmers/updateTaskAssignment",
        type: "GET",
        success: function(resp) {
            console.log("数据获取成功:", resp);
        },
        error: function(error) {
            console.log("请求失败:", error);
        }
    });
});

// 执行渲染
renderDashboard();

注意事项 #

• 不要使用$(document).ready()：该事件仅等待DOM结构加载完成，不等待图片、组件资源加载，可能导致仪表盘未就绪就发起请求。
• 优先使用组件官方回调：第三方仪表盘插件通常会提供初始化完成的回调或事件，这是最可靠的触发时机。

内容的提问来源于stack exchange，提问作者Chinni Ch