Lazy Load External Javascript With Data Parameters

user_16039600 0
Viewed 405

Trying to lazy load this code: <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>

Can lazy load an external JavaScript like this:

<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>

Or can do it like this:

<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>

But is it possible to lazy load the external JavaScript file with the data parameters

data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" data-colorful="1"
javascript-objects lazy-loading jquery ajax javascript
2 Answers

You can add data attributes to your script tag using the setAttribute() method like this:

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

Or if you would like to use jQuery, you can do it like this:

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

**** UPDATE: Here is a complete example. More information on the 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>

user_131748500

This is the easy way

Add the Following Code into Head.

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

Wrap the code in lazyhtml wrapper.

<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

user_18625210
Related