发表新帖
发表新帖

How to make JavaScript execute after page load?

前端 未结
关注
24 2354
孤城傲影
孤城傲影 2020-11-21 05:55

I\'m executing an external script, using a

相关标签:
24条回答
  • 不知归路
    2020-11-21 06:18

    JavaScript

    document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

    same for jQuery:

    $(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});




    NOTE: - Don't use the below markup ( because it overwrites other same-kind declarations ) :

    document.onreadystatechange = ...
    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-21 06:19

    If you are using jQuery,

    $(function() {...});

    is equivalent to

    $(document).ready(function () { })

    or another short hand:

    $().ready(function () { })

    See What event does JQuery $function() fire on? and https://api.jquery.com/ready/

    0 讨论(0)
  • 余生分开走
    2020-11-21 06:20 
    document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

    look here: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

    0 讨论(0)
  • 轻奢々
    2020-11-21 06:21 
    <script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

    http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

    0 讨论(0)
  • 花落未央
    2020-11-21 06:22

    Keep in mind that loading the page has more than one stage. Btw, this is pure JavaScript

    "DOMContentLoaded"

    This event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. At this stage you could programmatically optimize loading of images and css based on user device or bandwidth speed.

    Executes after DOM is loaded (before img and css): 

    document.addEventListener("DOMContentLoaded", function(){
    //....
});

    Note: Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user requested the page, you could turn your JavaScript asynchronous and optimize loading of stylesheets

    "load"

    A very different event, load, should only be used to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

    Exectues after everything is loaded and parsed: 

    window.addEventListener("load", function(){
    // ....
});

    MDN Resources:

    https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

    MDN list of all events:

    https://developer.mozilla.org/en-US/docs/Web/Events

    0 讨论(0)
  • 长发绾君心
    2020-11-21 06:22

    Working Fiddle on <body onload="myFunction()">

    <!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题