Lazy Load External Javascript With Data Parameters

Question

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"

return_false · Accepted Answer · 2021-05-27 14:33:10Z

2

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>

edited May 27, 2021 at 14:33

answered May 26, 2021 at 16:16

return_false

7483 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

sadko55 Over a year ago

The setAttribute did not work for me. I will try the jQuery method, but I'm not sure where the code you posted would go in this 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) ) { $.getScript("https://comments.app/js/widget.js?3")   } }, false); </script>

return_false Over a year ago

I can help you get the script working. Just clarify one thing for me, the external script will be looking for those variables in the data attributes, correct?

sadko55 Over a year ago

Yes the default code for the external script that works is this

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

return_false Over a year ago

OK I understand, i'll hook you up with a complete example.

sadko55 Over a year ago

Do I replace stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js with comments.app/js/widget.js?3 in your code? Also should the script go into the <head> of the file?

|

Niresh · Accepted Answer · 2021-11-03 18:23:31Z

-1

This is the easy way

Add the Following Code into Head.

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/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

answered Nov 3, 2021 at 18:23

Niresh

6776 silver badges16 bronze badges

Collectives™ on Stack Overflow

Lazy Load External Javascript With Data Parameters

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related