load scripts asynchronously

Question

I am using several plugins  custom widgets and some other libraries from JQuery  as a result I have several  js and  css files  I need to create a loader for my site because it takes some time to load  it will be nice if I can display the loader before importing all the    lt script type  text javascript  src  js jquery-1 6 2 min js  gt  lt  script gt   lt script type  text javascript  src  js myFunctions js  gt  lt  script gt   lt link type  text css  href  css main css  rel  stylesheet    gt             etc   I have found several tutorials that enable me to import a JavaScript library asynchronously  for example I can do something like      function              var s   document createElement  script            s type    text javascript           s async   true          s src    js jquery-ui-1 8 16 custom min js           var x   document getElementsByTagName  script   0           x parentNode insertBefore s  x               for some reason when I do the same thing for all my files the pages does not work  I have been trying for so long to try to find where the problem is but I just cannot find it  First I thought that it was probably because some javascript functions depended on the others  but I loaded them in the right order using the time out function when one completed I proceeded with the next and the page still behaves weird  for example I am not able to click on links etc    animations still work though    Anyways  Here is what I have been thinking    I believe browsers have a cache that s why it takes a long time to load the page for the first time and the next time it is quick  so what I am thinking of doing is replacing my index html page with a page that loads all this files asynchronously  when ajax is done loading all those files redirect to the page that I plan on using  when using that page it should not take long to load since the files should alredy be included on the cache of the browser  on my index page  page where  js and  css file get loaded asynchronously  I don t care of getting errors  I will just be displaying a loader and redirecting the page when done      Is this idea a good alternative  or should I keep trying on implementing the asynchronously methods     EDIT  the way I load everything async is like   importScripts     function importScripts           import  jquery-ui-1 8 16 custom min js     getContent  js jquery-1 6 2 min js  function  code                    var s   document createElement  script                    s type    text javascript                     s async   true                  s innerHTML code                  var x   document getElementsByTagName  script   0                   x parentNode insertBefore s  x                   setTimeout insertNext1 1                           import  jquery-ui-1 8 16 custom min js     function insertNext1                 getContent  js jquery-ui-1 8 16 custom min js  function  code                        var s   document createElement  script                        s type    text javascript                       s innerHTML code                      var x   document getElementsByTagName  script   0                       x parentNode insertBefore s  x                       setTimeout insertNext2 1                                    import  jquery-ui-1 8 16 custom css     function insertNext2                  getContent  css custom-theme jquery-ui-1 8 16 custom css  function  code                        var s   document createElement  link                        s type    text css                       s rel   stylesheet                       s innerHTML code                      var x   document getElementsByTagName  script   0                       x parentNode insertBefore s  x                       setTimeout insertNext3 1                                    import  main css     function insertNext3                  getContent  css main css  function  code                        var s   document createElement  link                        s type    text css                       s rel   stylesheet                       s innerHTML code                      var x   document getElementsByTagName  script   0                       x parentNode insertBefore s  x                       setTimeout insertNext4 1                                    import  jquery imgpreload min js     function insertNext4                 getContent  js farinspace jquery imgpreload min js  function  code                        var s   document createElement  script                        s type    text javascript                       s innerHTML code                      var x   document getElementsByTagName  script   0                       x parentNode insertBefore s  x                       setTimeout insertNext5 1                                     import  marquee js     function insertNext5                 getContent  js marquee js  function  code                        var s   document createElement  script                        s type    text javascript                       s innerHTML code                      var x   document getElementsByTagName  script   0                       x parentNode insertBefore s  x                       setTimeout insertNext6 1                                     import  marquee css     function insertNext6                  getContent  css marquee css  function  code                        var s   document createElement  link                        s type    text css                       s rel   stylesheet                       s innerHTML code                      var x   document getElementsByTagName  script   0                       x parentNode insertBefore s  x                       setTimeout insertNext 1                                    function insertNext                 setTimeout pageReadyMan 10                        get the content of url and pass that content to specified function function getContent  url  callBackFunction             attempt to create the XMLHttpRequest and make the request      try                var asyncRequest     variable to hold XMLHttpRequest object         asyncRequest   new XMLHttpRequest       create request object             register event handler         asyncRequest onreadystatechange   function                stateChange asyncRequest  callBackFunction                      asyncRequest open   GET   url  true       prepare the request         asyncRequest send  null       send the request           end try      catch   exception                  alert   Request failed                end catch      end function getContent     call function whith content when ready function stateChange asyncRequest  callBackFunction         if   asyncRequest readyState    4  amp  amp  asyncRequest status    200                     callBackFunction asyncRequest responseText             end if      end function stateChange   and the weird part is that all the style s work plus all the javascript functions  the page is frozen for some reason though

User · Answer

I would complete zzzzBov s answer with a check for the presence of callback and allow passing of arguments       function loadScript src  callback  args          var s  r  t        r   false        s   document createElement  script          s type    text javascript         s src   src        if  typeof callback       function             s onload   s onreadystatechange   function               if   r  amp  amp    this readyState    this readyState      complete                  r   true              callback apply args                                         t   document getElementsByTagName  script   0         t parent insertBefore s  t

User · Answer

Thanks to HTML5  you can now declare the scripts that you want to load asynchronously by adding  async  in the  tag     lt script async gt     lt  script gt    Note  The async attribute is only for external scripts  and should only be used if the src attribute is present    Note  There are several ways an external script can be executed    If async is present  The script is executed asynchronously with the rest of the page  the script will be executed while the page continues the parsing  If async is not present and defer is present  The script is executed when the page has finished parsing If neither async or defer is present  The script is fetched and executed immediately  before the browser continues parsing the page   See this  http   www w3schools com tags att script async asp

User · Answer

HTML5 s new  async  attribute is supposed to do the trick   defer  is also supported in most browsers if you care about IE    async - The HTML   lt script async src  siteScript js  onload  myInit    gt  lt  script gt    defer - The HTML   lt script defer src  siteScript js  onload  myInit    gt  lt  script gt    While analyzing the new adsense ad unit code I noticed the attribute and a search lead me here  http   davidwalsh name html5-async

User · Answer

I would suggest you take a look at Modernizr  Its a small light weight library that you can asynchronously load your javascript with features that allow you to check if the file is loaded and execute the script in the other you specify   Here is an example of loading jquery   Modernizr load           load     ajax googleapis com ajax libs jquery 1 6 1 jquery js       complete  function            if    window jQuery                 Modernizr load  js libs jquery-1 6 1 min js                                  This will wait for the fallback to load and        execute if it needs to      load   needs-jQuery js

User · Answer

I would suggest looking into minifying the files first and see if that gives you a big enough speed boost  If your host is slow  could try putting that static content on a CDN

User · Answer

A couple solutions for async loading     this function will work cross-browser for loading scripts asynchronously function loadScript src  callback      var s        r        t    r   false    s   document createElement  script      s type    text javascript     s src   src    s onload   s onreadystatechange   function           console log  this readyState      uncomment this line to see which ready states are called      if    r  amp  amp    this readyState    this readyState     complete                 r   true        callback                 t   document getElementsByTagName  script   0     t parentNode insertBefore s  t       If you ve already got jQuery on the page  just use     getScript url  successCallback    Additionally  it s possible that your scripts are being loaded executed before the document is done loading  meaning that you d need to wait for document ready before events can be bound to the elements   It s not possible to tell specifically what your issue is without seeing the code   The simplest solution is to keep all of your scripts inline at the bottom of the page  that way they don t block the loading of HTML content while they execute  It also avoids the issue of having to asynchronously load each required script   If you have a particularly fancy interaction that isn t always used that requires a larger script of some sort  it could be useful to avoid loading that particular script until it s needed  lazy loading      scripts loaded with   getScript will likely not be cached    For anyone who can use modern features such as the Promise object  the loadScript function has become significantly simpler   function loadScript src        return new Promise function  resolve  reject            var s          s   document createElement  script            s src   src          s onload   resolve          s onerror   reject          document head appendChild s               Be aware that this version no longer accepts a callback argument as the returned promise will handle callback  What previously would have been loadScript src  callback  would now be loadScript src  then callback    This has the added bonus of being able to detect and handle failures  for example one could call     loadScript cdnSource       catch loadScript bind null  localSource        then successCallback  failureCallback        and it would handle CDN outages gracefully

User · Answer

You might find this wiki article interesting    http   ajaxpatterns org On-Demand Javascript  It explains how and when to use such technique

User · Answer

I loaded the scripts asynchronously  html 5 has that feature  when all the scripts where done loading I redirected the page to index2 html where index2 html uses the same libraries  Because browsers have a cache once the page redirects to index2 html  index2 html loads in less than a second because it has all it needs to load the page   In my index html page I also load the images that I plan on using so that the browser place those images on the cache  so my index html looks like    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt       lt title gt Project Management lt  title gt        lt  -- the purpose of this page is to load all the scripts on the browsers cache so that pages can load fast from now on -- gt        lt script type  text javascript  gt           function stylesheet url                var s   document createElement  link                s type    text css               s async   true              s src   url              var x   document getElementsByTagName  head   0               x appendChild s                      function script url                var s   document createElement  script                s type    text javascript               s async   true              s src   url              var x   document getElementsByTagName  head   0               x appendChild s                        load scritps to the catche of browser          function                                  stylesheet  css custom-theme jquery-ui-1 8 16 custom css                    stylesheet  css main css                    stylesheet  css marquee css                    stylesheet  css mainTable css                     script  js jquery-ui-1 8 16 custom min js                    script  js jquery-1 6 2 min js                    script  js myFunctions js                    script  js farinspace jquery imgpreload min js                    script  js marquee js                                    lt  script gt        lt script type  text javascript  gt            once the page is loaded go to index2 html         window onload   function                  document location    index2 html                  lt  script gt    lt  head gt   lt body gt    lt div id  cover  style  position fixed  left 0px  top 0px  width 100   height 100   background-color Black  z-index 100   gt Loading lt  div gt    lt img src  images home background png    gt   lt img src  images home 3 png   gt   lt img src  images home 6 jpg   gt   lt img src  images home 4 png   gt   lt img src  images home 5 png   gt   lt img src  images home 8 jpg   gt   lt img src  images home 9 jpg   gt   lt img src  images logo png   gt   lt img src  images logo png   gt   lt img src  images theme contentBorder png   gt    lt  body gt   lt  html gt    another nice thing about this is that I may place a loader in the page and when the page is done loading the loader will go away and in a matte of milliseconds the new page will be running

User · Answer

Several notes     s async   true is not very correct for HTML5 doctype  correct is s async    async   actually using true is correct  thanks to amn who pointed it out in the comment just below  Using timeouts to control the order is not very good and safe  and you also make the loading time much larger  to equal the sum of all timeouts    Since there is a recent reason to load files asynchronously  but in order  I d recommend a bit more functional-driven way over your example  remove console log for production use         function         var prot     https     document location protocol  https      http            var scripts              path to first js            path to second js            path to third js              function completed     console log  completed          FIXME  remove logs      function checkStateAndCall path  callback            var  success   false          return function                 if    success  amp  amp    this readyState     this readyState     complete                        success   true                  console log path   is ready       FIXME  remove logs                 callback                                        function asyncLoadScripts files            function loadNext        chain element             if   files length  completed                var path   files shift                var scriptElm   document createElement  script                scriptElm type    text javascript               scriptElm async   true              scriptElm src   prot path              scriptElm onload   scriptElm onreadystatechange                     checkStateAndCall path  loadNext      load next file in chain when                                                       this one will be ready              var headElm   document head    document getElementsByTagName  head   0               headElm appendChild scriptElm                     loadNext       start a chain            asyncLoadScripts scripts

User · Answer

You can use LABJS or RequreJS  Script loaders like LABJS  RequireJS will improve the speed and quality of your code

User · Answer

Well  x parentNode returns the HEAD element  so you are inserting the script just before the head tag  Maybe that s the problem   Try x parentNode appendChild   instead

User · Answer

I wrote a little post to help out with this  you can read more here https   timber io snippets asynchronously-load-a-script-in-the-browser-with-javascript   but I ve attached the helper class below  It will automatically wait for a script to load and return a specified window attribute once it does   export default class ScriptLoader     constructor  options        const   src  global  protocol   document location protocol     options     this src   src     this global   global     this protocol   protocol     this isLoaded   false        loadScript          return new Promise  resolve  reject    gt             Create script element and set attributes       const script   document createElement  script         script type    text javascript        script async   true       script src      this protocol     this src             Append the script to the DOM       const el   document getElementsByTagName  script   0        el parentNode insertBefore script  el            Resolve the promise once the script is loaded       script addEventListener  load        gt            this isLoaded   true         resolve script                     Catch any errors while loading the script       script addEventListener  error        gt            reject new Error    this src  failed to load                            load          return new Promise async  resolve  reject    gt          if   this isLoaded            try             await this loadScript             resolve window this global             catch  e              reject e                    else           resolve window this global                          Usage is like this   const loader   new Loader       src   cdn segment com analytics js       global   Segment          scriptToLoad will now be a reference to  window Segment  const scriptToLoad   await loader load

User · Answer

for HTML5  you can use the  prefetch   lt link rel  quot prefetch quot  href  quot  style css quot  as  quot style quot    gt  have a look at  preload  for js   lt link rel  quot preload quot  href  quot used-later js quot  as  quot script quot  gt

User · Answer

Here is a great contemporary solution to the asynchronous script loading though it only address the js script with async false    There is a great article written in  www html5rocks com - Deep dive into the murky waters of script loading    After considering many possible solutions  the author concluded that adding js scripts to the end of body element is the best possible way to avoid blocking page rendering by js scripts    In the mean time  the author added another good alternate solution for those people who are desperate to load and execute scripts asynchronously    Considering you ve four scripts named script1 js  script2 js  script3 js  script4 js then you can do it with applying async   false         script1 js      script2 js      script3 js      script4 js    forEach function src      var script   document createElement  script      script src   src    script async   false    document head appendChild script         Now  Spec says  Download together  execute in order as soon as all download   Firefox  lt  3 6  Opera says  I have no idea what this    async    thing is  but it just so happens I execute scripts added via JS in the order they   re added   Safari 5 0 says  I understand    async     but don   t understand setting it to    false    with JS  I   ll execute your scripts as soon as they land  in whatever order   IE  lt  10 says  No idea about    async     but there is a workaround using    onreadystatechange      Everything else says  I   m your friend  we   re going to do this by the book   Now  the full code with IE  lt  10 workaround    var scripts        script1 js      script2 js      script3 js      script4 js     var src  var script  var pendingScripts       var firstScript   document scripts 0       Watch scripts load in IE function stateChange          Execute as many scripts in order as we can   var pendingScript    while  pendingScripts 0   amp  amp    pendingScripts 0  readyState     loaded     pendingScripts 0  readyState     complete            pendingScript   pendingScripts shift           avoid future loading events from this script  eg  if src changes      pendingScript onreadystatechange   null         can t just appendChild  old IE bug if element isn t closed     firstScript parentNode insertBefore pendingScript  firstScript             loop through our script urls while  src   scripts shift        if   async  in firstScript       modern browsers     script   document createElement  script        script async   false      script src   src      document head appendChild script         else if  firstScript readyState       IE lt 10        create a script and add it to our todo pile     script   document createElement  script        pendingScripts push script          listen for state changes     script onreadystatechange   stateChange         must set src AFTER adding onreadystatechange listener        else we   ll miss the loaded event for cached scripts     script src   src        else      fall back to defer     document write   lt script src      src      defer gt  lt     script gt

User · Answer

Here a little ES6 function if somebody wants to use it in React for example   x000D   x000D  import  uniqueId  from  lodash     optional x000D      x000D      param  String  file The path of the file you want to load  x000D      param  Function  callback  optional  The function to call when the script loads  x000D      param  String  id  optional  The unique id of the file you want to load  x000D      x000D  export const loadAsyncScript    file  callback  id    gt    x000D    const d   document x000D    if   id    id   uniqueId  async script        optional x000D    if   d getElementById id     x000D      const tag    script  x000D      let newScript   d createElement tag  x000D      let firstScript   d getElementsByTagName tag  0  x000D      newScript id   id x000D      newScript async   true x000D      newScript src   file x000D      if  callback    x000D           IE support x000D        newScript onreadystatechange        gt    x000D          if  newScript readyState      loaded     newScript readyState      complete     x000D            newScript onreadystatechange   null x000D            callback file  x000D            x000D          x000D           Other  non-IE  browsers support x000D        newScript onload        gt    x000D          callback file  x000D          x000D        x000D      firstScript parentNode insertBefore newScript  firstScript  x000D      else   x000D      console error  The script with id   id  is already loaded   x000D      x000D    x000D   x000D   x000D

User · Answer

Example from google    lt script type  text javascript  gt     function         var po   document createElement  script    po type    text javascript   po async   true      po src    https   apis google com js plusone js onload onLoadCallback       var s   document getElementsByTagName  script   0   s parentNode insertBefore po  s            lt  script gt

User · Answer

Have you considered using Fetch Injection  I rolled an open source library called fetch-inject to handle cases like these  Here s what your loader might look like using the lib   fetcInject      js jquery-1 6 2 min js      js marquee js      css marquee css      css custom-theme jquery-ui-1 8 16 custom css      css main css     then      gt       js jquery-ui-1 8 16 custom min js      js farinspace jquery imgpreload min js       For backwards compatibility leverage feature detection and fall-back to XHR Injection or Script DOM Elements  or simply inline the tags into the page using document write

User · Answer

Here is my custom solution to eliminate render-blocking JavaScript      put all your JS files here  in correct order const libs        jquery    https   code jquery com jquery-2 1 4 min js      bxSlider    https   cdnjs cloudflare com ajax libs bxslider 4 2 5 jquery bxslider min js      angular    https   ajax googleapis com ajax libs angularjs 1 5 0-beta 2 angular min js      ngAnimate    https   cdnjs cloudflare com ajax libs angular js 1 5 0-beta 2 angular-animate min js    const loadedLibs      let counter   0  const loadAsync   function lib      var http   new XMLHttpRequest     http open  GET   libs lib   true    http onload        gt        loadedLibs lib    http responseText     if    counter    Object keys libs  length  startScripts         http send      const startScripts   function       for  var lib in libs  eval loadedLibs lib     console log  allLoaded      for  var lib in libs  loadAsync lib    In short  it loads all your scripts asynchronously  and then executes them consequently   Github repo  https   github com mudroljub js-async-loader

User · Answer

One reason why your scripts could be loading so slowly is if you were running all of your scripts while loading the page  like this   callMyFunctions      instead of     window  load function           callMyFunctions          This second bit of script waits until the browser has completely loaded all of your Javascript code before it starts executing any of your scripts  making it appear to the user that the page has loaded faster   If you re looking to enhance the user s experience by decreasing the loading time  I wouldn t go for the  loading screen  option  In my opinion that would be much more annoying than just having the page load more slowly

User · Answer

Check out this https   github com stephen-lazarionok async-resource-loader  It has an example that shows how to load JS  CSS and multiple files with one shot

[javascript] load scripts asynchronously

Examples related to javascript

Examples related to ajax

Examples related to html

Examples related to asynchronous