发表新帖
发表新帖

How to make JavaScript execute after page load?

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

I\'m executing an external script, using a

相关标签:
24条回答
  • 余生分开走
    2020-11-21 06:08 

    <script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

    0 讨论(0)
  • Happy的楠姐
    2020-11-21 06:10

    There is a very good documentation on How to detect if document has loaded using Javascript or Jquery.

    Using the native Javascript this can be achieved

    if (document.readyState === "complete") {
 init();
 }

    This can also be done inside the interval

    var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

    Eg By Mozilla

    switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

    Using Jquery To check only if DOM is ready

    // A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

    To check if all resources are loaded use window.load

     $( window ).load(function() {
        console.log( "window loaded" );
    });
    0 讨论(0)
  • 孤街浪徒
    2020-11-21 06:12

    My advise use asnyc attribute for script tag thats help you to load the external scripts after page load 

    <script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
    0 讨论(0)
  • 北恋
    2020-11-21 06:13

    Just define <body onload="aFunction()"> that will be called after the page has been loaded. Your code in the script is than enclosed by aFunction() { }.

    0 讨论(0)
  • 梦谈多话
    2020-11-21 06:16

    Reasonably portable, non-framework way of having your script set a function to run at load time:

    if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}
    0 讨论(0)
  • 长发绾君心
    2020-11-21 06:18

    Here's a script based on deferred js loading after the page is loaded,

    <script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.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>

    Where do I place this?

    Paste code in your HTML just before the </body> tag (near the bottom of your HTML file).

    What does it do?

    This code says wait for the entire document to load, then load the external file deferredfunctions.js.

    Here's an example of the above code - Defer Rendering of JS

    I wrote this based on defered loading of javascript pagespeed google concept and also sourced from this article Defer loading javascript

    0 讨论(0)
 看不清?
提交回复
热议问题