如何修复jQuery无限背景循环动画首次运行的卡顿问题？

问题根源 #

1. 动画关键帧衔接逻辑错误：当前动画从background-position-y: 0走到background-position-y: [图片高度]px，结束后跳回0时，背景图的视觉状态和起始位置不连续，导致跳变。
2. 图片高度获取时机过早：页面加载时图片可能未完全加载，jQuery获取的高度为0，直接导致初始动画参数异常。

修复方案 #

1. 调整动画关键帧实现无缝衔接 #

将动画结束位置改为-图片高度（向上滚动场景），同时确保背景图开启repeat-y属性。这样动画结束时的视觉效果和起始状态完全一致，循环切换时不会出现跳变。如果是向下滚动需求，可将结束位置改为图片高度，同样依赖repeat-y实现衔接。

2. 等待图片加载完成后再初始化动画 #

创建临时图片对象监听加载完成事件，确保在图片尺寸确定后再获取高度、生成并应用动画，避免因图片未加载导致的高度错误。

3. 移动端适配同步处理 #

针对移动端加载单独背景图的场景，复用上述逻辑，确保动画参数与当前加载的图片匹配。

完整代码示例 #

<div class="bg-container"></div>

.bg-container {
  width: 100%;
  height: 100vh;
  background-repeat: repeat-y;
  background-size: cover;
}

$(document).ready(function() {
  var isMobile = $(window).width() < 768;
  var bgUrl = isMobile ? '移动端背景图地址' : '桌面端背景图地址';
  
  // 临时图片对象监听加载状态
  var tempImg = new Image();
  tempImg.src = bgUrl;
  
  tempImg.onload = function() {
    var imgHeight = tempImg.height;
    var $container = $('.bg-container');
    
    // 设置容器背景图
    $container.css('background-image', 'url(' + bgUrl + ')');
    
    // 动态生成无缝滚动动画
    var scrollAnimation = $('<style>')
      .text('@keyframes scroll { 0% { background-position-y: 0; } 100% { background-position-y: -' + imgHeight + 'px; } }')
      .appendTo('head');
    
    // 应用动画属性
    $container.css({
      'animation': 'scroll 10s linear infinite',
      'animation-fill-mode': 'none'
    });
  };
});

额外说明 #

如果使用的是非无缝拼接的背景图，即使动画逻辑正确，循环时仍会出现视觉断层，需提前将背景图调整为无缝样式。

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