How to execute a function when page has fully loaded

Question

I need to execute some JavaScript code when the page has fully loaded  This includes things like images   I know you can check if the DOM is ready  but I don   t know if this is the same as when the page is fully loaded

User · Answer

Usually you can use window onload  but you may notice that recent browsers don t fire window onload when you use the back forward history buttons    Some people suggest weird contortions to work around this problem  but really if you just make a window onunload handler  even one that doesn t do anything   this caching behavior will be disabled in all browsers  The MDC documents this  feature  pretty well  but for some reason there are still people using setInterval and other weird hacks   Some versions of Opera have a bug that can be worked around by adding the following somewhere in your page    lt script gt history navigationMode    compatible   lt  script gt    If you re just trying to get a javascript function called once per-view  and not necessarily after the DOM is finished loading   you can do something like this    lt img src  javascript location href  javascript yourFunction       gt    For example  I use this trick to preload a very large file into the cache on a loading screen    lt img src  bigfile  onload  this location href  javascript location href   javascript doredir        doredir     gt

User · Answer

You may want to use window onload  as the docs indicate that it s not fired until both the DOM is ready and ALL of the other assets in the page  images  etc   are loaded

User · Answer

2019 update  This is was the answer that worked for me  As I needed multiple ajax requests to fire and return data first to count the list items                    document  ajaxComplete function           alert  Everything is ready now

User · Answer

For completeness sake  you might also want to bind it to DOMContentLoaded  which is now widely supported  document addEventListener  DOMContentLoaded   function event        your code here       More info  https   developer mozilla org en-US docs Web Events DOMContentLoaded

User · Answer

In modern browsers with modern javascript     2015  you can add type  module  to your script tag  and everything inside that script will execute after whole page loads  e g    lt script type  module  gt    alert  runs after      Whole page loads before this line execute  lt  script gt   lt script gt    alert  runs before    lt  script gt    also older browsers will understand nomodule attribute  Something like this    lt script nomodule gt    alert  tuns after    lt  script gt    For more information you can visit javascript info

User · Answer

Try this it Only Run After Entire Page Has Loaded  By Javascript  window onload   function           code goes here      By Jquery    window  bind  load   function            code goes here

User · Answer

And here s a way to do it with PrototypeJS   Event observe window   load   function event           Do stuff

User · Answer

That s called load  It came waaaaay before DOM ready was around  and DOM ready was actually created for the exact reason that load waited on images   window addEventListener  load   function        alert  It s loaded

User · Answer

The onload property of the GlobalEventHandlers mixin is an event   handler for the load event of a Window  XMLHttpRequest   element    etc   which fires when the resource has loaded    So basically javascript already has onload method on window which get executed which page fully loaded including images     You can do something   var spinner   true   window onload   function         whatever you like to do now  for example hide the spinner in this case   spinner   false

User · Answer

Javascript using the onLoad   event  will wait for the page to be loaded before executing    lt body onload  somecode      gt    If you re using the jQuery framework s document ready function the code will load as soon as the DOM is loaded and before the page contents are loaded     document  ready function            jQuery code goes here

User · Answer

the window onload event will fire when everything is loaded  including images etc   You would want to check the DOM ready status if you wanted your js code to execute as early as possible  but you still need to access DOM elements

User · Answer

If you need to use many onload use   window  load instead  jQuery      window  load function           code

User · Answer

Try this code  document onreadystatechange   function        if  document readyState     interactive         initApplication            visit https   developer mozilla org en-US docs DOM document readyState for more details

[javascript] How to execute a function when page has fully loaded?

Examples related to javascript