Lazy Loading javascript or loading after 3 sec

Question

The javascript is loading an iframe. https://jsfiddle.net/uzairm/zc5ge27v/

<div class="editorskit-no-mobile">
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=1606&amp;SearchSetupID=41&amp;LinkID=474907&amp;Height=2000"></script>
</div>

I am trying to lazy load it. I tried async and defer attribute. also, create it dynamically but it didn't work. Any idea? i just want to lazy load it or load it after 3 seconds.

Muhammed B. Aydemir · Answer 1 · 2020-04-24T16:51:06.757

You could have a function at the bottom of your html, which is automatically called when the page and images and all is loaded.

<body>
  Your HTML here

  <script>
    loadScript('script-url');
  </script>
</body>

The function checks if the script already exists, if not creates it with a default delay of 3 seconds.

function loadScript(url, delay_ms = 3000) {
  let isLoaded = document.querySelectorAll('.my-script');
  if(isLoaded.length > 0) {
    return;
  }
  setTimeout(() => {
    let myScript = document.createElement("script");
    myScript.src = url;
    myScript.className = 'my-script';
    document.body.appendChild(myScript);
  }, delay_ms)
}

Sources:

Lazy Loading javascript or loading after 3 sec

1 Answers1