Executing JavaScript after other scripts have loaded

Other Questions JavaScript
1

I’m dealing with a website that has tons of JavaScript. I want to add a URL preview feature using a third-party script, but it’s not working on pages where content is loaded dynamically.

The problem is that the preview script runs before the content is loaded. I can make it work by manually calling urlPreview.load(), but I need it to happen automatically.

I’ve tried adding the script to the header with a defer attribute:

<script defer src="//cdn.urlpreview.com/embed.js?key=my-api-key"></script>

The script provider also offers a method to load it only when needed:

function loadUrlPreviewScript() {
  if (document.querySelectorAll("[data-preview-url]").length === 0) return;
  var preview = window.preview = window.preview || {};
  if (preview.load) {
    preview.load();
  } else {
    var script = document.createElement('script');
    script.src = '//cdn.urlpreview.com/embed.js';
    document.head.appendChild(script);
  }
}
document.addEventListener('DOMContentLoaded', loadUrlPreviewScript);

But this doesn’t solve the issue either. Any ideas on how to ensure the preview script runs after all other scripts? I’m open to using jQuery if needed.

2

I’ve encountered similar challenges when working with dynamic content. One effective approach I’ve used is leveraging the window.requestAnimationFrame method. It allows you to schedule your script execution for the next available frame, which typically occurs after other scripts have finished processing. Here’s a basic implementation:

function checkAndLoadPreview() {
if (document.querySelectorAll(‘[data-preview-url]’).length > 0) {
urlPreview.load();
} else {
window.requestAnimationFrame(checkAndLoadPreview);
}
}

window.requestAnimationFrame(checkAndLoadPreview);

This method continuously checks for the presence of preview elements and only executes the load function when they’re available. It is efficient and avoids blocking the main thread, making it well-suited for pages with extensive JavaScript.

3

From my experience, synchronizing script execution with dynamically loaded content is challenging. I dealt with a similar issue by using a global flag—let’s call it contentReady—that signals when all dynamic content has been loaded. I implemented a periodic check with setInterval to monitor the flag continuously. Once the flag shows that the content is fully loaded, I clear the interval and invoke the URL preview function. Although not the most elegant solution, this method reliably prevents premature script execution and avoids extensive code alterations.

4

hey there! have u tried using MutationObserver? it can watch for changes in the DOM and trigger ur script when new content loads. might solve ur issue without needing to modify existing code. just set it up to observe the container where dynamic content appears and run urlPreview.load() when changes happen.