如何解决HTMX局部页面加载中脚本并行下载引发的依赖问题？

针对HTMX局部加载中库脚本未完成加载就执行依赖代码的问题，以下是几种实用的解决方式：

1. 利用脚本的onload回调触发依赖代码 #

直接在库脚本的onload事件中执行依赖逻辑，确保库加载完成后才运行相关代码：

<!-- 局部加载的内容 -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js" onload="renderChart()"></script>
<script>
function renderChart() {
  // 这里编写依赖Plotly的图表生成代码
  const data = [{x: [1, 2, 3], y: [4, 5, 6], type: 'line'}];
  const layout = {title: '示例图表'};
  Plotly.newPlot('chart-container', data, layout);
}
</script>
<div id="chart-container"></div>

2. 动态创建脚本元素控制加载顺序 #

通过内联脚本动态创建库脚本标签，在其onload回调中执行依赖代码，完全掌控加载流程：

<!-- 局部加载的内容 -->
<script>
// 动态加载Plotly库
const plotlyScript = document.createElement('script');
plotlyScript.src = 'https://cdn.plot.ly/plotly-2.27.0.min.js';
plotlyScript.onload = function() {
  // 库加载完成后执行图表逻辑
  const data = [{x: [1, 2, 3], y: [4, 5, 6], type: 'bar'}];
  const layout = {title: '动态加载示例'};
  Plotly.newPlot('dynamic-chart', data, layout);
};
// 将脚本添加到页面头部
document.head.appendChild(plotlyScript);
</script>
<div id="dynamic-chart"></div>

3. 主页面预加载全局共用库 #

如果该JS库是多个局部页面的共同依赖，直接在主页面的头部预加载，局部内容仅编写依赖脚本即可：

<!-- 主页面头部 -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>

<!-- 局部加载的内容 -->
<script>
// 直接使用已加载的Plotly库
const data = [{x: [1, 2, 3], y: [4, 5, 6], type: 'scatter'}];
const layout = {title: '预加载示例'};
Plotly.newPlot('preload-chart', data, layout);
</script>
<div id="preload-chart"></div>

4. 监听脚本加载事件 #

直接监听脚本元素的load事件，确保依赖代码在库加载完成后执行：

<!-- 局部加载的内容 -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js" id="plotly-lib"></script>
<script>
document.getElementById('plotly-lib').addEventListener('load', () => {
  const data = [{x: [1, 2, 3], y: [4, 5, 6], type: 'pie'}];
  const layout = {title: '事件监听示例'};
  Plotly.newPlot('event-chart', data, layout);
});
</script>
<div id="event-chart"></div>

方案选择建议 #

• 若库为多页面共用：优先选择主页面预加载，减少重复请求，提升整体性能。
• 若库仅个别局部页面使用：选择动态创建脚本或onload回调，避免全局冗余加载。

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