如何实现网页背景GIF打开时暂停、登录完成后继续播放

实现方案 #

该需求可以通过CSS配合JS代码实现，纯CSS无法响应登录验证的交互事件来触发GIF播放，因此需要结合JS逻辑完成，常用实现方案如下：

方案1：静态首帧占位+登录后切换GIF（最简单易实现） #

1. 先将你的GIF首帧导出为静态图片，命名为AU_first_frame.png，初始状态下将该静态图设为背景，修改你的CSS代码：

body  
{
    overflow: hidden;
    /* 初始加载首帧静态图，实现GIF暂停在首帧的效果 */
    background-image:url(AU_first_frame.png) ;
    border-image-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 60px 450px;
    background-size: cover;
}
/* 其余原有CSS代码保持不变 */

2. 在登录验证成功的回调逻辑中加入JS代码，将背景替换为GIF，待GIF播放完成后隐藏背景即可：

// 登录凭证验证通过后执行该函数
function handleLoginSuccess() {
    const gifAddress = 'AU.gif';
    // 预加载GIF，避免切换时出现加载卡顿
    const preloadGif = new Image();
    preloadGif.src = gifAddress;
    preloadGif.onload = function() {
        // 替换背景为动态GIF
        document.body.style.backgroundImage = `url(${gifAddress})`;
        // 此处的时长替换为你的GIF实际播放总时长，单位为毫秒，比如GIF总时长3秒就填3000
        setTimeout(() => {
            // GIF播放完成后移除背景，实现消失效果
            document.body.style.backgroundImage = 'none';
        }, 3000);
    }
}

方案2：img标签模拟背景+GIF控制库（可控性更高） #

如果你需要更灵活的播放控制能力，可以用绝对定位的img标签模拟背景效果，再配合开源的GIF控制库直接操作GIF的播放、暂停状态：

1. 在HTML中插入模拟背景的GIF标签：

<img src="AU.gif" id="bgGif" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;">

2. 初始加载页面时调用库的API让GIF暂停在首帧，登录验证通过后调用播放API，播放完成后隐藏该img标签即可。

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