使用数据参数延迟加载外部 Javascript

Question

正在尝试延迟加载此代码： <script async src="https://comments.app/js/widget.js?3" data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" data-colorful="1"></script>

可以像这样延迟加载外部 JavaScript:

<script type="text/javascript">
window.addEventListener('scroll', function(e) {
  var currentScroll = document.scrollingElement.scrollTop;
  var telegram_target = document.getElementById('telegram');

  if( telegram_target && (currentScroll > telegram_target.getBoundingClientRect().top - 150) ) {
$.getScript("https://comments.app/js/widget.js?3")
  }
}, false);
</script>

或者可以这样做：

<script type="text/javascript">          
window.addEventListener('scroll', function(e) {
  var currentScroll = document.scrollingElement.scrollTop;
  var telegram_target = document.getElementById('telegram');

  if( telegram_target && (currentScroll > telegram_target.getBoundingClientRect().top - 150) ) {
var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://comments.app/js/widget.js?3"; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
  }
}, false);
</script>

但是是否可以使用数据参数

延迟加载外部JavaScript文件

data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" data-colorful="1"

Answer 1

您可以使用 setAttribute() 方法将数据属性添加到您的脚本标签：

var script = document.createElement("script");
script.setAttribute("data-comments-app-website","TvibSQx_");

或者如果您想使用 jQuery，您可以这样做：

$("<script />", {
  "src": "URL"
  /* other attributes here */
}).data({
  "comments-app-website": "VALUE"
  /* more data attributes here */
}).appendTo("head");

**** 更新：这是一个完整的示例。有关 Intersection Observer API

的更多信息

/* instantiate observer object */
let observer = new IntersectionObserver(function(entries, observer) {
  /* loop through entries on intersection event */
  entries.forEach(entry => {
    /* if an entry is intersecting */
    if (entry.isIntersecting) {
      console.log("loading script");
      /* remove the observer */
      observer.disconnect();
      /* create the script tag and append it to the head */
      $("<script />", {
        "src": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js",
        /* assign id to script element so external script can find it */
        "id": "script-tag",
        /* add data attributes */
        "data-comments-app-website": "TvibSQx_",
        "data-limit": "5",
        "data-color": "29B127",
        "data-dislikes": "1"
        /* add more attributes here */
      }).appendTo("head")
    }
  });
});
/* assign the observer object to the telegram element */
observer.observe($("#telegram").get(0));

body,
html {
  padding: 0;
  margin: 0;
  background: slategray;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  min-height: 100%;
}

.spacer {
  padding: 30px;
  height: 200vh;
}

#telegram {
  padding: 30px;
  background: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="spacer">Scroll down to trigger observer</div>

<div id="telegram">Script will load past this point</div>

Answer 2

这是简单的方法

将以下代码添加到Head。

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous"></script>

将代码包装在 lazyhtml 包装器中。

<div class="lazyhtml" data-lazyhtml onvisible>
  <script type="text/lazyhtml">
  <!--
  <script async src="https://comments.app/js/widget.js?3" data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" data-colorful="1"></script>
  -->
  </script>
</div>

LazyHTML Git

使用数据参数延迟加载外部 Javascript

Lazy Load External Javascript With Data Parameters

javascript

ajax

jquery

lazy-loading

javascript-objects