如何用原生JS实现外部JavaScript延迟到用户滚动页面后加载

核心问题说明 #

现有代码无法按预期运行的核心原因如下：

• window.onscroll事件会在用户滚动操作的过程中连续触发，单次滚动就可能触发数十次回调，导致重复插入相同的script标签，不仅会重复加载脚本浪费资源，还可能引发脚本多次执行的逻辑异常
• 没有设置脚本加载状态的标记，无法判断脚本是否已经加载，滚动事件每次触发都会重复执行插入逻辑
• 直接给window.onscroll赋值会覆盖页面其他位置绑定的滚动监听逻辑，容易出现冲突

调整后可用代码 #

<script>
// 全局标记，记录脚本是否已经加载
let hasLoadedScript = false;

function loadTargetScript() {
    // 已加载则直接跳过执行
    if (hasLoadedScript) return;
    hasLoadedScript = true;

    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'script.js';
    // 可选：脚本加载完成后的回调逻辑
    s.onload = () => {
        console.log('外部脚本加载完成');
    };
    const firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(s, firstScript);

    // 加载完成后移除滚动监听，避免不必要的性能消耗
    window.removeEventListener('scroll', loadTargetScript);
}

// 用addEventListener绑定事件，不会覆盖其他已有的滚动监听逻辑
// passive: true 可以提升滚动流畅度，现代浏览器均支持
window.addEventListener('scroll', loadTargetScript, { passive: true });

// 可选兼容逻辑：如果页面刷新后滚动条默认不在顶部，直接加载脚本
window.addEventListener('load', () => {
    if (window.scrollY > 0) loadTargetScript();
});
</script>

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