Lazy-load a javascript script?

Question

Is there a way I can wrap an external JS script embed with lazy-load behavior to only execute when the embed is in the viewport?

Context: I have an external javascript embed that when run, generates an iframe with a scheduling widget. Works pretty well, except that when the script executes, it steals focus and scrolls you down to the widget when it’s done executing. The vendor has been looking at a fix for a couple weeks, but it’s messing up my pages. I otherwise like the vendor.

Javascript embed call:

<a href=https://10to8.com/book/zgdmlguizqqyrsxvzo/ id="TTE-871dab0c-4011-4293-bee3-7aabab857cfd" target="_blank">See
    Online Booking Page</a>
<script src=https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js> </script> <script>
    window.TTE.init({
        targetDivId: "TTE-871dab0c-4011-4293-bee3-7aabab857cfd",
        uuid: "871dab0c-4011-4293-bee3-7aabab857cfd",
        service: 1158717
    });
</script>

While I'm waiting for the vendor to fix their js, I wondered if lazy-loading the JS embed may practically eliminate the poor user experience. Warning: I'm a JS/webdev noob, so probably can't do anything complicated. A timer-based workaround is not ideal because users may still be looking at other parts of the page when the timer runs out. Here are the things I’ve tried and what happens:

I tried:	What happened:
Add async to one or both of the script declarations above	Either only shows the link or keeps stealing focus.
Adding type=”module” to one or both script declarations above	Only rendered the link.
Wrapping the above code in an iframe with the appropriate lazy-loading tags	When I tried, it rendered a blank space.

Also, I realize it's basically the same question as this, but it didn't get any workable answers.

This would be a multi-step process and you'd have to make some decisions. You can write some javascript to detect when the user has scrolled to a certain point, or when a certain element comes in the viewport, and only then insert the ` — TKoL, May 11 '21 at 13:16
Does this answer your question? [Trigger a function when the user scrolls the element into the viewport – Vanilla JavaScript](https://stackoverflow.com/questions/54629590/trigger-a-function-when-the-user-scrolls-the-element-into-the-viewport-vanilla) — Heretic Monkey, May 11 '21 at 13:17
But the problem with this is that if you wait too long, then they may have scrolled past that point by the time the code runs and the script loads. — TKoL, May 11 '21 at 13:17
Hi Dylan, this should help you out .... https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file or https://stackoverflow.com/questions/30033152/how-does-lazy-module-loading-work-in-es6 — fuzzybear, May 11 '21 at 13:23
You may could try out https://creativelive.github.io/appear/ which is a JS lib that can help you trigger the JS code to A) create the *script* tag which will load the vendor's script in the page (use a variable to do it only once) and then B) call the init function with the init params which you can build based on the attributes of the `` tag. — Patrick Janser, May 11 '21 at 13:28

score 0 · Accepted Answer · answered May 11 '21 at 14:45

0

I actually also speak french but I'll reply in english for everybody.

Your question was quite interesting because I also wanted to try out some lazy loading so I had a play on Codepen with your example (using your booking id).

I used the appear.js library because I didn't really want to spend time trying some other APIs (perhaps lighter so to take in consideration).

The main JS part I wrote is like this:

// The code to init the appear.js lib and add our logic for the booking links.
(function(){
  // Perhaps these constants could be put in the generated HTML. I don't really know
  // where they come from but they seem to be related to an account.
  const VENDOR_LIB_SRC = "https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js";
  const UUID = "871dab0c-4011-4293-bee3-7aabab857cfd";
  const SERVICE = 1158717;
  
  let vendorLibLoaded = false; // Just to avoid loading several times the vendor's lib.

  appear({
    elements: function() {
      return document.querySelectorAll('a.booking-link');
    },
    appear: function(bookingLink) {
      console.log('booking link is visible', bookingLink);
      
      /**
       * A function which we'll be able to execute once the vendor's
       * script has been loaded or later when we see other booking links
       * in the page.
       */
      function initBookingLink(bookingLink) {
        window.TTE.init({
          targetDivId: bookingLink.getAttribute('id'),
          uuid: UUID,
          service: SERVICE
        });
      }
      
      if (!vendorLibLoaded) {
        // Load the vendor's JS and once it's loaded then init the link.
        let script = document.createElement('script');
        script.onload = function() {
          vendorLibLoaded = true;
          initBookingLink(bookingLink);
        };
        script.src = VENDOR_LIB_SRC;
        document.head.appendChild(script);
      } else {
        initBookingLink(bookingLink);
      }
    },
    
    reappear: false
  });
})();

I let you try my codepen here: https://codepen.io/patacra/pen/gOmaKev?editors=1111

Tell me when to delete it if it contains sensitive data!

Kind regards,

Patrick

answered May 11 '21 at 14:45

Patrick Janser

3,318
1
16
18

That is an elegant solution respecting dependency and everything. I'm gonna implement it today and get back to you. I'll have to do some experimenting - I think the init script regexes the to replace the whole thing with their iframe, and the [id] is used to populate the iframe. Don't worry about the sensitive data - the data flows only go one direction. Also, if the vendor exposed secrets based on instance id tokens available on a website, that would be a terrible vendor choice for a security consulting company...;) – Dylan May 11 '21 at 17:49
Hi Patrick - I tested it out and am having trouble replicating your codepen: https://simple-salt.com/node/55. I can see that appear.js is loaded as an asset and looks correct, but I suspect it's not running: if I scroll over the element, the vendor library doesn't get loaded into the assets, and clearly doesn't render. I have added the vendor library to the set of standard pre-loaded js, but that didn't help. Thanks again. – Dylan May 12 '21 at 13:24
Hi @Dylan! I had a look at your Drupal page 55 but I didn't see `appear.js` loaded. Did you create a custom module to add the minified `appear.js` lib and some custom JS with the conventional `Drupal.behaviors` to run the init code? As you saw on my codepen, I added a CSS class to these links. If you select the links with a `a[id]` CSS/jQuery selector, you'll probably get some other undesired links. – Patrick Janser May 12 '21 at 22:27
@Dylan: I found the "meet" widget in your contact page. I'm not sure, but it seems that the `` tag and the ` – Patrick Janser May 12 '21 at 22:42
thank you. I just included appear.js in the set of loaded js libraries and expected it to run - I guess I need to learn more about how to integrate it and the code you included with drupal in order to make it actually run. – Dylan May 13 '21 at 16:04
@Dylan A mais c'est parfait! Je vois que tu as effectivement mis `appear.js` et le bout de code custom dans l'aggregation JS de Drupal. Du coup, tout est prêt et il faut juste que tu modifies le contenu de ta page de contact et que t'y mettes `See Online Booking Page` en virant les deux balises ` – Patrick Janser May 14 '21 at 08:44
Thanks, but it...doesn't? see a test page here: https://simple-salt.com/node/53. appear.js and the code you provided (lazy_10to8.js) are loaded. As you can tell - the isn't getting replaced. – Dylan May 18 '21 at 20:26
@Dylan: If you look at your JS console, you see that you get this error: `Uncaught ReferenceError: appear is not defined`. This is because the *appear.js* is either missing or loaded after the custom code which is using it. You could put *appear.js* and then the custom code in the same JS file so that you don't get the error. I also notice that the HTML with the booking link has some spaces in the id attribute: `id=" TTE-871dab0c-4011-4293-bee3-7aabab857cfd " target=" _ blank "`. Better correct this also if not the vendor lib will probably not be able to find the id as it has undesired spaces. – Patrick Janser May 19 '21 at 22:00
I figured it out. The root cause was that RocketLoader was messing up these extra js libraries (but no others??), causing them not to run. Disabled it and everything works perfectly. Thanks for your patience and help. That appear library is pretty slick. – Dylan May 20 '21 at 13:27

score 0 · Answer 2 · answered Sep 07 '21 at 20:05

This method will Lazy Load HTML Elements only when it is visible to User, If the Element is not scrolled into viewport it will not be loaded, it works like Lazy Loading an Image.

Add LazyHTML script to Head.

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

Wrap Element in LazyHTML Wrapper.

<div class="lazyhtml" data-lazyhtml onvisible>
<script type="text/lazyhtml">
      <!--
       <a href=https://10to8.com/book/zgdmlguizqqyrsxvzo/ id="TTE-871dab0c-4011-4293-bee3-7aabab857cfd" target="_blank">See
      Online Booking Page</a>
      <script src=https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js>
   </script> 
   <script>
      window.TTE.init({
      targetDivId: "TTE-871dab0c-4011-4293-bee3-7aabab857cfd",
      uuid: "871dab0c-4011-4293-bee3-7aabab857cfd",
      service: 1158717
      });
   </script>
   -->
</script>
</div>

Lazy-load a javascript script?

2 Answers2