延迟加载外部 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");

**** 更新：这是一个完整的例子。 更多关于交叉口观察者 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