Load javascript async, then check DOM loaded before executing callback

by

What you need is a simple queue of onload functions. Also please avoid browser sniffing as it is unstable and not future proof. For full source code see the [Demo]

var onload_queue = [];
var dom_loaded = false;

function loadScriptAsync(src, callback) {
  var script = document.createElement('script'); 
  script.type = "text/javascript";
  script.async = true;
  script.src = src;
  script.onload = script.onreadystatechange = function() {
    if (dom_loaded) 
      callback();
    else 
      onload_queue.push(callback);
    // clean up for IE and Opera
    script.onload = null;
    script.onreadystatechange = null;
  };
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(script);
}

function domLoaded() {
   dom_loaded = true;
   var len = onload_queue.length;
   for (var i = 0; i < len; i++) {
     onload_queue[i]();
   }
   onload_queue = null;
};

// Dean's dom:loaded code goes here
// do stuff
domLoaded();

Test usage

loadScriptAsync(
  "http://code.jquery.com/jquery-1.4.4.js", 
  function() {
      alert("script has been loaded");
   }
);

More Related Contents:

  1. Converting a recursive function into an asynchronous CPS implementation (javascript)
  2. How to return value from an asynchronous callback function? [duplicate]
  3. Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
  4. Callback after all asynchronous forEach callbacks are completed
  5. I know that callback function runs asynchronously, but why?
  6. How should I call 3 functions in order to execute them one after the other?
  7. How to “await” for a callback to return?
  8. nodeJs callbacks simple example
  9. How can I take advantage of callback functions for asynchronous XMLHttpRequest?
  10. Waiting on multiple asynchronous calls to complete before continuing
  11. Select div using wildcard ID
  12. Asynchronous Script Loading Callback
  13. How to make non-blocking javascript code?
  14. document.createElement(‘script’)… adding two scripts with one callback
  15. Does an async function always need to be called with await?
  16. javascript: execute a bunch of asynchronous method with one callback
  17. Why is setState in reactjs Async instead of Sync?
  18. jQuery document.createElement equivalent?
  19. How can I count text lines inside an DOM element? Can I?
  20. How to autosize a textarea using Prototype?
  21. Execute write on doc: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
  22. How to serialize DOM node to JSON even if there are circular references?
  23. Dynamically creating HTML elements using Javascript?
  24. How to access DOM elements in electron?
  25. How to retrieve the element where a contextmenu has been executed
  26. understanding the concept of javascript callbacks with node.js, especially in loops
  27. Removing HTMLCollection elements from the DOM
  28. Javascript – if with asynchronous case
  29. Is there a difference between `new Image()` and `document.createElement(‘img’)`?
  30. How to add DOM element script to head section?

Leave a Comment