推迟将JavaScript加载到特定页面锚点

Jared Wilber 发表于 Dev

贾里德·威尔伯（Jared Wilber）

我有一些JavaScript代码，仅在页面滚动到某个id标签后才想加载。

例如，假设我有一个脚本model.js和一个html元素<p id='anchor'></p>。

我的目标是<script src="model.js"></script>在网页到达页面时触发加载<p id='anchor'></p>

我假设有一个相当简单的方法可以实现这一目标，但是我很难找到如何做到这一点。到目前为止，我的研究仅使用defer或async在<script>负载中产生了结果，但是这些似乎没有给我想要的结果。

任何帮助是极大的赞赏！

koder613

为了解决您的问题，我决定在到达元素的滚动位置后将脚本添加到DOM中，然后将src属性设置为model.js。

为了仅一次添加脚本，第一次添加脚本时，我从中删除了事件监听器document。

使用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);

请参阅此代码笔以测试代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。