如何条件加载.js文件？head.js加载zooming.js失败求排查建议

我来帮你拆解下为什么直接用<script>标签能正常加载Zooming.js，换成head.js就不行的问题：

失败原因分析 #

• 异步加载的执行时序问题：head.js默认是异步加载脚本的，它不会阻塞后续代码的执行。如果你的页面代码在Zooming.js还没加载完成时就尝试调用Zooming这个全局对象，自然会因为变量未定义而报错。而直接用<script>标签是同步加载，浏览器会等脚本下载并执行完成后，才会继续解析后面的代码，所以不会出现这个问题。
• 未正确利用head.js的加载完成回调：很多时候失败是因为没有把依赖Zooming.js的初始化代码放在head.js的回调函数里。head.js加载完脚本后需要你明确指定回调来执行后续逻辑，否则代码会“超前”运行。

解决建议 #

• 使用head.js的回调函数包裹初始化逻辑：把需要用到Zooming的代码放在head.js的第二个参数（回调函数）里，确保脚本加载完成后再执行初始化：

  head.js("https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js", function() {
    // 在这里初始化Zooming
    const zoomingInstance = new Zooming();
    zoomingInstance.listen(); // 启动图片监听
  });
  

• 检查是否存在冲突或加载路径问题：确认head.js本身已经正确加载，并且Zooming.js的URL没有拼写错误。有时候网络问题也会导致脚本加载失败，可以在浏览器开发者工具的“网络”面板里查看请求状态。
• 如果需要条件加载，在回调前加判断逻辑：如果是要满足特定条件才加载Zooming.js，可以把head.js的调用放在条件判断里，比如：

  if (window.innerWidth > 768) { // 比如只在大屏设备加载
    head.js("https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js", function() {
      new Zooming().listen();
    });
  }
  

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