将JavaScript加载延迟到特定的页面锚

我有一些JavaScript代码，我只想在页面滚动到某个id标记时加载这些代码

例如，假设我有一个脚本

model.js

和一个html元素

我的目标是在页面到达

我假设有一个相当简单的方法来实现这一点，但我很难找到如何做到这一点。到目前为止，我的研究只得出了在

加载中使用

defer

或

async

的东西，但这些似乎没有给出我想要的结果

---

非常感谢您的帮助

为了解决您的问题，我决定在到达元素的滚动位置后，将脚本添加到DOM中，然后将

src

属性设置为

model.js

为了只添加一次脚本，在第一次添加脚本时，我从

文档中删除了事件侦听器

使用jQuery：

let anchorOffsetTop = $("#anchor").offset().top;

$(document).on("scroll", function () {
  console.log(anchorOffsetTop, $(window).height(), $(this).scrollTop());
  if ($(this).scrollTop() + $(window).height() > anchorOffsetTop) {

    let s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "model.js";

    $("body").append(s); // add script to body
    $(document).off("scroll"); // remove event listener

    console.log(s);
  }
});


使用纯香草JS：

let anchorOffsetTop2 = document.getElementById("anchor").offsetTop;

const addScript = () => {
  if (
    document.documentElement.scrollTop + window.innerHeight >
    anchorOffsetTop2
  ) {
    let s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "model.js";

    document.body.appendChild(s);
    console.log(s);
    window.removeEventListener("scroll", addScript);
  }
};

window.addEventListener("scroll", addScript);


请参阅codepen以测试代码。
为什么不希望在此之前加载脚本？为什么不加载脚本，在那之前不执行特定的操作呢？你想要纯JS/jQuery的解决方案吗？@David这是一个很好的观点，我想这没有什么区别。该脚本使用D3来执行一些繁重的DOM操作，这也发生在开始加载的其他脚本中，因此我想将其他DOM内容推到某一点，以免减慢转换等。公平地说，我可以控制脚本本身内部的延迟（我已经在滚动位置上执行事件触发器），但是我宁愿把逻辑分开，并且认为延迟整个脚本加载是最干净的方法。谢谢！我正在寻找一个纯JS解决方案来尽可能减少依赖性，但这很好：）@JaredWilber我也用纯JS解决方案更新了我的答案。让我知道这是否足够。