页面加载后执行的JavaScript

时间：2009-04-30 16:38:37

标签： javascript html javascript-events pageload

我正在使用<script>内的<head>执行外部脚本。

现在，由于脚本在页面加载之前执行了，我无法访问<body>等。在文档被“加载”（HTML完全下载并在RAM中）后，我想执行一些JavaScript。我的脚本执行时是否有任何可以挂钩的事件，这些事件会在页面加载时触发？

27 个答案:

答案 0 :(得分：697)

这些解决方案可行：

<body onload="script();">

或

document.onload = function ...

甚至

window.onload = function ...

请注意，最后一个选项是更好的方式，因为它是unobstrusive并且是considered more standard。

答案 1 :(得分：185)

合理的可移植，非框架方式让您的脚本设置一个在加载时运行的函数：

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;
    }
}

答案 2 :(得分：114)

请记住，加载页面有多个阶段。顺便说一句，这是纯JavaScript

＆＃34; DOMContentLoaded＆＃34;

初始HTML文档已完全加载并解析时会触发此事件，而无需等待样式表，图像和子帧完成加载。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和css的加载。

加载DOM后的异常（在img和css之前）：

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

注意：同步JavaScript暂停解析DOM。   如果您希望在用户请求页面后尽快解析DOM，您可以将您的JavaScript异步化和optimize loading of stylesheets

＆＃34;负载＆＃34;

一个非常不同的事件加载，只应用于检测完全加载的页面。使用负载是一个非常流行的错误，其中DOMContentLoaded会更合适，所以要小心。

加载并解析所有内容后的Exectues：

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

MDN资源：

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

所有活动的MDN列表：

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

答案 3 :(得分：111)

您可以在正文中添加“onload”属性

...<body onload="myFunction()">...

或者，如果您使用的是jQuery，则可以执行

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

我希望它能回答你的问题。

请注意，$（窗口）.load将在页面上呈现文档后执行。

答案 4 :(得分：49)

如果脚本是在文档的<head>内加载的，则可以使用脚本标记中的defer属性。

示例： 

<script src="demo_defer.js" defer></script>

来自https://developer.mozilla.org：

  

<强>延迟

     

此布尔属性设置为向浏览器指示脚本   意味着在解析文档之后但之前执行   触发DOMContentLoaded。

     

如果是src，则不能使用此属性   属性不存在（即对于内联脚本），在这种情况下它会   没有效果。

     

为动态插入的脚本使用实现类似的效果   而是async = false。带有defer属性的脚本将执行   它们在文档中出现的顺序。

答案 5 :(得分：24)

这是一个基于加载页面后延迟js加载的脚本，

<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>

我在哪里放置这个？

  

将代码粘贴到</body>标记之前的HTML中（靠近HTML文件的底部）。

它做了什么？

  

此代码表示等待整个文档加载，然后加载    外部文件deferredfunctions.js。

以上是上述代码的示例 - Defer Rendering of JS

我是根据defered loading of javascript pagespeed google概念撰写的，并且也来自本文Defer loading javascript

答案 6 :(得分：20)

查看挂钩document.onload或jQuery $(document).load(...)。

答案 7 :(得分：8)

JavaScript 

.modal.fade .modal-dialog {
  animation-name: fade-in-scale-animation;
  animation-duration: 0.3s;
}

@keyframes fade-in-scale-animation {
  0%   {transform: scale(0.5); opacity : 0 }
  100% {transform: scale(1); opacity : 1}
}

与jQuery相同：

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");
    }
});




注意：-不要使用下面的标记（因为它会覆盖其他相同类型的声明）：

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

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

答案 8 :(得分：6)

<强> Working Fiddle 

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

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>

答案 9 :(得分：6)

Google推荐的最佳方法。 ：）

<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

答案 10 :(得分：6)

document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

看这里：http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

答案 11 :(得分：5)

如果您使用的是jQuery，

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

相当于

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

请参阅What event does JQuery $function() fire on?

答案 12 :(得分：4)

只需定义在加载页面后将调用的<body onload="aFunction()">。脚本中的代码被aFunction() { }包围。

答案 13 :(得分：4)

$（窗口）.on（“load”，function（）{...}）;

.ready()最适合我。

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

.load()可以正常工作，但不会等到页面加载完毕。

jQuery(window).load(function () { ... });

对我不起作用，打破下一个内联脚本。我也在使用jQuery 3.2.1以及其他一些jQuery forks。

要隐藏我的网站加载叠加层，我使用以下内容：

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

答案 14 :(得分：4)

我有时会在更复杂的页面上发现并非所有元素都被时间窗口加载。如果是这种情况，请在函数延迟之前添加setTimeout。它并不优雅，但这是一个很好的简单黑客。

window.onload = function(){ doSomethingCool(); };

...变为

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

答案 15 :(得分：4)

<body onload="myFunction()">

此代码效果很好。

但window.onload方法有各种依赖关系。所以它可能不会一直有效。

答案 16 :(得分：3)

有关如何detect if document has loaded使用Javascript或Jquery的非常好的文档。

使用本机Javascript可以实现

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

这也可以在区间

内完成 
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;
}

使用Jquery 仅检查DOM是否准备就绪

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

要检查是否已加载所有资源，请使用window.load 

 $( window ).load(function() {
        console.log( "window loaded" );
    });

答案 17 :(得分：3)

使用YUI library（我喜欢）：

YAHOO.util.Event.onDOMReady(function(){
    //your code
});
便携而美丽！但是，如果您不将YUI用于其他内容（请参阅其文档），我会说它不值得使用它。

N.B。 ：要使用此代码，您需要导入2个脚本

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

答案 18 :(得分：2)

将此代码与jQuery库一起使用，这将完全正常。

MAT_A.data = data;

答案 19 :(得分：1)

我的建议使用脚本标记的asnyc属性，以帮助您在页面加载后加载外部脚本

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

答案 20 :(得分：1)

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

// your javascript event here

});
</script>

答案 21 :(得分：1)

正如丹尼尔所说，你可以使用document.onload。

各种javascript框架（jQuery，Mootools等）使用自定义事件'domready'，我想这必须更有效。如果你正在使用javascript进行开发，我强烈建议使用一个框架，它们可以大大提高你的工作效率。

答案 22 :(得分：1)

比较

在下面的代码片段中，我收集了选定的方法并显示了它们的顺序。备注

  • 任何现代浏览器都不支持document.onload（X）（事件永远不会fired）
  • 如果您同时使用<body onload="bodyOnLoad()">（F）和window.onload（E），则只会执行第一个（因为它会覆盖第二个）
    • <body onload="...">（F）中给出的
  • 事件处理程序由附加的onload函数包装
  • document.onreadystatechange（D）不覆盖document .addEventListener('readystatechange'...)（C）可能是由于onXYZevent-like方法独立于addEventListener队列（允许添加多个侦听器）。在执行这两个处理程序之间可能什么也没发生。
  • 所有脚本都在控制台中写入其时间戳-但是也可以访问div的脚本也将其时间戳也写入正文中（在脚本执行后单击“全页”链接以查看时间戳）。
    • 解决方案readystatechange（C，D）由浏览器多次执行，但针对不同的文档状态：
    • 正在加载-文档正在加载（摘要中未触发）
    • 交互式-解析文档，并在DOMContentLoaded之前触发
    • 完成-加载文档和资源，并在body/window onload之前触发

<html>

<head>
  <script>
    // solution A
    console.log(`[timestamp: ${Date.now()}] A: Head script`);
    
    // solution B
    document.addEventListener("DOMContentLoaded", () => {
      print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);
    });

    // solution C
    document.addEventListener('readystatechange', () => {
      print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);
    });
   
    // solution D
    document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)};
    
    // solution E (never executed)
    window.onload = () => {
      print(`E: <body onload="..."> override this handler`);
    };

    // solution F
    function bodyOnLoad() {
      print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);      
      infoAboutOnLoad(); // additional info
    }
    
    // solution X
    document.onload = () => {print(`document.onload is never fired`)};



    // HELPERS

    function print(txt) { 
      console.log(txt);
      if(mydiv) mydiv.innerHTML += txt.replace('<','&lt;').replace('>','&gt;') + '<br>';
    }
    
    function infoAboutOnLoad() {
      console.log("window.onload (after  override):", (''+document.body.onload).replace(/\s+/g,' '));
      console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`);
    }
            
    console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' '));

  </script>
</head>

<body onload="bodyOnLoad()">
  <div id="mydiv"></div>

  <!-- this script must te at the bottom of <body> -->
  <script>
    // solution G
    print(`[timestamp: ${Date.now()}] G: <body> bottom script`);
  </script>
</body>

</html>

答案 23 :(得分：0)

使用自执行onload函数

window.onload = function (){
    /* statements */
}();

答案 24 :(得分：0)

简单来说，只需在脚本标签中使用“ defer”。

.....

答案 25 :(得分：0)

您可以在特定脚本文件上编写一个函数，并使用 onload 属性将其调用到您的 body 元素中。

示例：

<script>
  afterPageLoad() {
   //your code here
}
</script>

现在使用脚本标签将您的脚本调用到您的 html 页面中：

<script src="afterload.js"></script>

进入你的身体元素；像这样添加 onload 属性：

<body onload="afterPageLoad();">

答案 26 :(得分：-1)

我可以通过此代码捕获页面加载

<script>
console.log("logger saber");

window.onload = (event) => {
  console.log('page is fully loaded');
document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;
};

</script>
相关问题
最新问题