Delaying a jquery script until everything else has loaded

Question

I have a jquery script which I need to run only once everything else on the page  including some other javascripts  over which I have no control  have finished doing their thing   I though perhaps there was an alternative to   document  ready but I haven t been able to find it

User · Answer

The following script ensures that my finalFunction runs after your page has been fully loaded with images  stylesheets and external content   lt script gt       document addEventListener  quot load quot   my finalFunction  false        function my finalFunction e               things to do after all has been loaded            lt  script gt   A good explanation is provided by kirupa on running your code at the right time  see https   www kirupa com html5 running your code at the right time htm

User · Answer

You can have   document  ready   multiple times in a page  The code gets run in the sequence in which it appears    You can use the   window  load   event for your code since this happens after the page is fully loaded and all the code in the various   document  ready   handlers have finished running     window  load function        your code here

User · Answer

It turns out that because of a peculiar mixture of javascript frameworks that I needed to initiate the script using an event listener provide by one of the other frameworks

User · Answer

From here      Add jQuery  var GM JQ   document createElement  script     GM JQ src    http   jquery com src jquery-latest js   GM JQ type    text javascript    document getElementsByTagName  head   0  appendChild GM JQ        Check if jQuery s loaded  function GM wait           if typeof unsafeWindow jQuery     undefined                   window setTimeout GM wait 100               else                     unsafeWindow jQuery           letsJQuery                GM wait         All your GM code must be inside this function  function letsJQuery             Do your jQuery stuff in here          This will wait until jQuery is loaded to use it  but you can use the same concept  setting variables in your other scripts  or checking them if they re not your script  to wait until they re loaded to use them   For example  on my site  I use this for asynchronous JS loading and waiting until they re finished before doing anything with them using jQuery    lt script type  text javascript  language  JavaScript  gt       function js url           s   document createElement  script            s type    text javascript           s src   url          document getElementsByTagName  head   0  appendChild s                     js   js jquery-ui js        js   js jrails js        js   js jquery jgrowl-min js        js   js jquery scrollTo-min js        js   js jquery corner-min js        js   js jquery cookie-min js        js   js application-min js         function JS wait             if  typeof   cookie     undefined        set in jquery cookie-min js             typeof getLastViewedAnchor     undefined        set in application-min js             typeof getLastViewedArchive     undefined        set in application-min js              typeof getAntiSpamValue     undefined      set in application-min js                        window setTimeout JS wait  100                      else                         JS ready                          function JS ready                snipped               document  ready JS wait    lt  script gt

User · Answer

Multiple   document  ready   will fire in order top down on the page   The last   document  ready   will fire last on the page   Inside the last   document  ready    you can trigger a new custom event to fire after all the others    Wrap your code in an event handler for the new custom event    lt html gt   lt head gt   lt script gt        document  on  my-event-afterLastDocumentReady   function                 Fires LAST               document  ready function                Fires FIRST               document  ready function                Fires SECOND               document  ready function                Fires THIRD          lt  script gt   lt body gt      other code  scripts  etc      lt  body gt   lt  html gt    lt script gt        document  ready function                Fires FOURTH            This event will fire after all the other   document  ready   functions have completed             Usefull when your script is at the top of the page  but you need it run last           document  trigger  my-event-afterLastDocumentReady             lt  script gt

User · Answer

Have you tried loading all the initialization functions using the     ready  running the jQuery function you wanted last   Perhaps you can use setTimeout   on the     ready function you wanted to run  calling the functionality you wanted to load   Or  use setInterval   and have the interval check to see if all the other load functions have completed  store the status in a boolean variable    When conditions are met  you could cancel the interval and run the load function

User · Answer

This code block solve my problem    x000D   x000D   lt script type  text javascript  gt  x000D      window  bind  load   function      x000D         Code here x000D        x000D   lt  script gt  x000D   x000D   x000D

[javascript] Delaying a jquery script until everything else has loaded

Examples related to javascript

Examples related to jquery

Examples related to dom