如何实现切换导航标签时才加载对应PHP内容，降低页面初始化耗时

实现逻辑 #

• 页面初始化仅渲染默认激活的TAB1内容，其余标签内容区域留空
• 监听标签切换事件，仅当用户首次点击对应标签时，才通过AJAX请求PHP接口拉取对应数据
• 已加载过的标签切换时不再重复发起请求，减少资源消耗

调整后的HTML代码 #

<div class="col-md-6">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Default Tab</h4>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item"> 
                    <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true" data-tab-id="1">TAB1</a> 
                </li>
                <li class="nav-item"> 
                    <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false" data-tab-id="2">TAB2</a> 
                </li>
                <li class="nav-item"> 
                    <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false" data-tab-id="3">TAB3</a> 
                </li>
                <!-- 剩余标签以此类推 -->
            </ul>
            <!-- Tabs -->
            <div class="tab-content tabcontent-border">
                <div class="tab-pane active show" id="tab1" role="tabpanel" data-loaded="true">
                    <div class="p-20">
                        <!-- 初始直接渲染TAB1的PHP内容 -->
                        <?php echo get_tab_content(1); ?>
                    </div>
                </div>
                <div class="tab-pane p-20" id="tab2" role="tabpanel" data-loaded="false">
                    <!-- 初始留空，点击后加载 -->
                </div>
                <div class="tab-pane p-20" id="tab3" role="tabpanel" data-loaded="false">
                    <!-- 初始留空，点击后加载 -->
                </div>
                <!-- 剩余标签以此类推 -->
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

新增懒加载JS代码 #

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    const targetTab = $($(e.target).attr('href'));
    const tabId = $(e.target).data('tab-id');
    // 仅未加载过的标签才发起请求
    if (targetTab.data('loaded') === false) {
        // 可选：添加加载中提示
        targetTab.html('<div class="text-center p-3">加载中...</div>');
        // 请求PHP接口拉取数据
        $.post('get_tab_content.php', {tab_id: tabId}, function(res) {
            targetTab.html(res);
            targetTab.data('loaded', true);
        });
    }
})

PHP接口代码（get_tab_content.php） #

<?php
// 接收标签ID参数
$tab_id = intval($_POST['tab_id']);
// 根据标签ID拉取对应API数据返回
function get_tab_content($tab_id) {
    // 此处写对应标签的API请求逻辑
    switch ($tab_id) {
        case 1:
            // 拉取TAB1对应API数据
            return 'TAB1的内容';
        case 2:
            // 拉取TAB2对应API数据
            return 'TAB2的内容';
        case 3:
            // 拉取TAB3对应API数据
            return 'TAB3的内容';
        // 剩余标签以此类推
        default:
            return '内容不存在';
    }
}
echo get_tab_content($tab_id);
?>

优化说明 #

• 初始页面仅请求1次TAB1的接口数据，加载时间从10-15秒可压缩到1-2秒左右
• 已加载过的标签切换无需重复请求，大幅减少接口调用频率
• 可根据需求自定义加载中状态，优化用户体验

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