页面加载时自动启动jQuery Ripples波纹动画的实现问题

问题根源分析 #

你的代码存在两个核心问题：

• 重复调用了$('#ripple').ripples()初始化方法，可能导致组件内部状态混乱
• 定时器启动完全依赖window.focus()事件，页面首次加载时即使手动调用.focus()，也可能因为元素未完全渲染、不支持聚焦或Webflow的加载时序问题，导致事件未正确触发

修正后的代码 #

<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>
<script>
// 只初始化一次ripples组件
function initRipples() {
  $('#ripple').ripples({
    resolution: 512,
    dropRadius: 30,
    perturbance: 0.04
  });
}

function randomDrop() {
  var $el = $('#ripple');
  var x = Math.random() * $el.outerWidth();
  var y = Math.random() * $el.outerHeight();
  var dropRadius = 30;
  var strength = 0.04 + Math.random() * 0.04;
  $el.ripples('drop', x, y, dropRadius, strength);
}

$(function() {
  initRipples();
  
  var timer = null;
  
  // 封装启动定时器的函数
  function startRipples() {
    if (timer === null) {
      timer = setInterval(randomDrop, 1000);
    }
  }
  
  // 封装停止定时器的函数
  function stopRipples() {
    if (timer !== null) {
      clearInterval(timer);
      timer = null;
    }
  }
  
  // 页面加载完成后直接启动波纹
  startRipples();
  
  // 保留标签页切换的暂停/恢复逻辑
  $(window)
    .focus(startRipples)
    .blur(stopRipples);
});
</script>

额外注意事项 #

• 确保你的#ripple元素是块级元素且已设置宽高，否则outerWidth()和outerHeight()会返回0，波纹无法正确生成
• 在Webflow中，建议将这段脚本放在页面底部（设置里的「自定义代码」-「页脚代码」区域），确保DOM元素和jQuery都已加载完成

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