如何在页面加载完成后调用Locomotive库脚本？

问题原因 #

你之前用body onload="script('./js/lib/locomotive.min.js')"无效，是因为script()不是原生JavaScript的内置方法，浏览器无法识别这个调用。

可行解决方案 #

1. 等待所有资源（图片、样式、字体等）加载完成后加载脚本

如果需要确保页面所有资源都加载完毕再引入Locomotive，使用window的load事件：

window.addEventListener('load', function() {
  // 创建script元素
  const locomotiveScript = document.createElement('script');
  // 设置脚本路径
  locomotiveScript.src = './js/lib/locomotive.min.js';
  
  // 可选：脚本加载完成后立即初始化Locomotive
  locomotiveScript.onload = function() {
    // 这里写Locomotive的初始化逻辑，示例：
    // new LocomotiveScroll({
    //   el: document.querySelector('[data-scroll-container]'),
    //   smooth: true
    // });
  };
  
  // 将脚本添加到页面中
  document.body.appendChild(locomotiveScript);
});

2. 等待DOM结构加载完成后加载脚本（无需等图片等资源）

如果只需要DOM解析完成就加载脚本，用DOMContentLoaded事件，逻辑和上面一致：

document.addEventListener('DOMContentLoaded', function() {
  const locomotiveScript = document.createElement('script');
  locomotiveScript.src = './js/lib/locomotive.min.js';
  
  locomotiveScript.onload = function() {
    // 初始化Locomotive
  };
  
  document.head.appendChild(locomotiveScript);
});

3. 简化写法：直接将脚本放在body末尾（基础场景）

如果不需要严格等待所有资源，只是希望脚本在DOM解析完成后执行，可以直接把脚本标签放在</body>前，无需额外事件监听：

<body>
  <!-- 页面内容 -->
  
  <script src="./js/lib/locomotive.min.js"></script>
  <script>
    // 初始化Locomotive
    new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true
    });
  </script>
</body>

补充说明 #

• 之前尝试的defer属性失效，可能是因为脚本依赖的资源未加载完成，或者初始化代码没有在脚本加载完成后执行。使用script.onload可以确保脚本加载完成后再执行初始化逻辑。
• 动态创建script标签的方式，能灵活控制脚本的加载时机，且完全原生，无需依赖任何库。

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