背景GIF切换为PNG时出现短暂白屏问题如何解决

问题根因 #

1. 错误使用setInterval而非setTimeout：setInterval会每4秒重复触发背景替换逻辑，额外增加浏览器重绘负担
2. 定时时长不匹配：GIF实际播放时长为5秒，当前设置的4秒会提前触发切换，逻辑本身存在偏差
3. 直接替换background-image会触发浏览器重绘，即使预加载了图片，重绘间隙也可能出现短暂空白

最优解决方案（零白屏） #

采用双层背景叠加方案，PNG全程处于渲染状态，切换时仅移除上层GIF背景，完全避免重绘间隙：

1. 先调整CSS，同时设置两层背景：

#alumni_body {
    background-image: url("此处替换为你的GIF背景地址"), url("{{ url('static/alumni/assets/media/background/pwc-alumni-login-video.png') }}");
    background-size: cover;
    background-repeat: no-repeat;
}

2. 修改JS逻辑：

$(document).ready(function () {
    // 仅执行一次切换，时长匹配GIF的5秒播放周期
    setTimeout(function () {
        $('#alumni_body').css("background-image", "url( {{ url('static/alumni/assets/media/background/pwc-alumni-login-video.png') }} )");
    }, 5000);
});

备选方案（不改动CSS） #

如果不想调整CSS，可确保PNG完全预加载完成后再执行切换，避免图片未加载完成导致的白屏：

$(document).ready(function () {
    // 手动预加载PNG
    const loginBgPng = new Image();
    const pngUrl = "{{ url('static/alumni/assets/media/background/pwc-alumni-login-video.png') }}";
    loginBgPng.src = pngUrl;

    // 图片加载完成后再启动定时切换
    loginBgPng.onload = function() {
        setTimeout(function () {
            $('#alumni_body').css("background-image", `url(${pngUrl})`);
        }, 5000);
    }
});

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