如何使用jQuery加载HTML内容避免<div>闪烁问题？

问题根源 #

你的问题本质是两个原因导致的闪烁：

• 初始页面渲染时，#li1容器是空的，直到jQuery完成加载并执行load()后才填充内容，视觉上会出现“从无到有”的跳变；
• 每次setInterval触发load()时，jQuery会先清空#li1的原有内容，再加载新内容，这也会造成短暂的空白闪烁。

具体解决方案 #

方案1：客户端隐藏容器，加载完成后再显示

先通过CSS默认隐藏目标容器，等内容加载完成后再显示，同时改用$.get()替代直接load()，避免清空容器的操作：

<!-- index.php 头部添加CSS -->
<style>
    #li1 { display: none; }
</style>

<!-- 修改后的jQuery脚本 -->
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    function loadTable(){
        $.get("it.php", function(data) {
            // 提取目标内容并替换
            var targetContent = $(data).find("#segment1").html();
            $("#li1").html(targetContent).show();
        });
    }
    loadTable();
    setInterval(loadTable, 3000);
});
</script>

<div id="li1"></div>

优点：不需要修改服务器端逻辑，纯前端解决初始加载闪烁；后续刷新时直接替换内容，不会出现空白。

方案2：服务器端预加载初始内容

如果it.php的内容不需要动态实时生成（或者可以直接复用），可以在index.php中用PHP预加载初始内容，彻底避免客户端初始加载的延迟：

<!-- index.php 中的容器 -->
<div id="li1"><?php include 'it.php'; ?></div>

<!-- 修改后的jQuery脚本 -->
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    function loadTable(){
        $.get("it.php", function(data) {
            $("#li1").html($(data).find("#segment1").html());
        });
    }
    // 初始已有内容，可延迟执行第一次刷新，避免重复加载
    setTimeout(loadTable, 3000);
    setInterval(loadTable, 3000);
});
</script>

优点：初始页面渲染时就有内容，完全消除初始闪烁；后续刷新只替换已有内容，体验更流畅。

方案3：优化定时刷新的无闪烁替换

如果需要保留客户端初始加载，但要优化后续刷新的闪烁，可以用临时容器先加载新内容，再一次性替换：

function loadTable(){
    $.get("it.php", function(data) {
        // 创建隐藏临时容器存储新内容
        var tempContainer = $("<div>").html(data).find("#segment1");
        // 一次性替换目标容器内容
        $("#li1").replaceWith(tempContainer);
        // 保持容器ID不变，方便后续刷新
        tempContainer.attr("id", "li1");
    });
}

适用场景：需要动态生成初始内容，但不想让用户看到空白加载状态的情况。

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