Webflow环境下，如何在<head>异步脚本执行后运行自定义脚本？

核心问题 #

你当前的代码里，Finsweet脚本带async属性，它加载完成后会立即执行，不受脚本顺序或DOM加载状态的严格约束，导致自定义脚本可能在滑块初始化完成前就运行，无法正确修改页面元素。

无需定时器的解决方案：监听Finsweet自定义事件 #

Finsweet的Attributes系列脚本（包括CMS Slider）会在组件完成初始化后，向document触发一个自定义事件，监听这个事件就能确保自定义代码在滑块准备就绪后执行。

把你的代码替换成以下内容：

<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
<script>
// 监听CMS Slider初始化完成事件
document.addEventListener('cmsslider:ready', function() {
  // 在这里编写你的自定义脚本逻辑
  // 示例：修改滑块内的文本样式
  const sliderItems = document.querySelectorAll('.cms-slider-item');
  sliderItems.forEach(item => {
    item.style.color = '#2c3e50';
  });
});
</script>

方案优势 #

• cmsslider:ready事件是Finsweet脚本在完成滑块DOM渲染、交互绑定等所有初始化工作后主动触发的，能确保你的代码访问到完全就绪的滑块组件。
• 不用定时器，避免了等待时长不合理的问题，性能更稳定。

Webflow环境适配说明 #

• 直接在Webflow原生自定义代码编辑器中替换原有代码即可，放在<head>标签内或</body>闭合标签前都能正常工作。
• 不要重复添加Finsweet的脚本标签，避免冲突。

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