Fatal编程技术网
  • javascript/
  • 如何使JavaScript在页面加载后执行？

如何使JavaScript在页面加载后执行？

javascript html dom

如何使JavaScript在页面加载后执行？,javascript,html,dom,dom-events,pageload,Javascript,Html,Dom,Dom Events,Pageload,我正在执行一个外部脚本，在内部使用 现在，由于脚本在页面加载之前执行，因此我无法访问，以及其他内容。我想在文档“加载”（HTML完全下载并在RAM中）后执行一些JavaScript。在脚本执行时，是否有任何事件可以挂接在页面加载时触发？查看挂接document.onload或jQuery$（document）。加载（…）只需定义加载页面后将调用的。脚本中的代码被affunction（）{}所包围，这些解决方案将起作用： <body onload="script();"> 甚至 wi

我正在执行一个外部脚本，在
内部使用

现在，由于脚本在页面加载之前执行，因此我无法访问
，以及其他内容。我想在文档“加载”（HTML完全下载并在RAM中）后执行一些JavaScript。在脚本执行时，是否有任何事件可以挂接在页面加载时触发？

查看挂接
document.onload
或jQuery
$（document）。加载（…）
只需定义加载页面后将调用的
。脚本中的代码被
affunction（）{}

所包围，这些解决方案将起作用：

<body onload="script();">
甚至

window.onload = function ...
请注意，最后一个选项是一个更好的方法，因为它是且是。

您可以在主体内部设置一个“onload”属性

...<body onload="myFunction()">...
我希望它能回答你的问题

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

正如Daniel所说，您可以使用document.onload

各种javascript框架hwoever（jQuery、Mootools等）使用自定义事件“domready”，我想这一定会更有效。如果您使用javascript进行开发，我强烈建议您使用框架，它们可以极大地提高您的工作效率。

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

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;
    }
}
使用（我喜欢它）：

轻便又漂亮！然而，如果你不把YUI用于其他东西（见它的文档），我会说它不值得使用

注意：要使用此代码，您需要导入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>
这是一个基于页面加载后延迟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>


函数downloadJSAtOnload（）{
var元素=document.createElement（“脚本”）；
element.src=“deferredfunctions.js”；
document.body.appendChild（元素）；
}
if（window.addEventListener）
addEventListener（“加载”，downloadJSAtOnload，false）；
else if（窗口附件）
window.attachEvent（“onload”，downloadJSAtOnload）；
else window.onload=下载jsatonload；
我应该把这个放在哪里？

将代码粘贴到HTML的
标记之前（靠近HTML文件底部）

它有什么作用？

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

以下是上述代码的示例-

我是根据pagespeed google的概念写这篇文章的，如果您使用的是jQuery，也可以从这篇文章中获得

$（函数（）{…}）

相当于


$（文档）.ready（函数（）{}）

或另一种简写：


$（）.ready（函数（）{}）

请参见和



函数myFunction（）{
警报（“页面已加载”）；
}
你好，世界！




这段代码运行良好


但是
window.onload
方法有各种依赖关系。因此，它可能不会一直工作。
我发现有时在更复杂的页面上，并非所有元素都在时间窗口加载。onload被触发。如果是这种情况，请在函数延迟之前添加setTimeout。它并不优雅，但它是一个简单的黑客，渲染良好


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


变成


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



如果脚本加载在文档的
中，则可以在脚本标记中使用
延迟属性

示例：


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






发件人：


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


推迟

此布尔属性设置为向浏览器指示脚本
是指在解析文档之后但在
射击中有子弹

如果src
属性不存在（即对于内联脚本），在这种情况下
没有效果

要为动态插入的脚本实现类似效果，请使用
async=false。具有defer属性的脚本将在中执行
它们在文档中的显示顺序

看这里：

函数downloadJSAtOnload（）{
var元素=document.createElement（“脚本”）；
element.src=“defer.js”；
document.body.appendChild（元素）；
}
if（window.addEventListener）
addEventListener（“加载”，downloadJSAtOnload，false）；
else if（窗口附件）
window.attachEvent（“onload”，downloadJSAtOnload）；
else window.onload=下载jsatonload；



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


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








$（窗口）.bind（“加载”，函数（）{
//这里是您的javascript事件
});

关于如何使用Javascript或Jquery，有一个非常好的文档

使用本机Javascript可以实现这一点


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


这也可以在间隔内完成


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




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


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


请记住，加载页面有多个阶段。顺便说一句，这是纯JavaScript
“DOMContentLoaded”
当初始HTML文档已完全加载和解析，而不等待样式表、图像和子帧完成加载时，将触发此事件。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和css的加载

加载DOM后执行（在img和css之前）：

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

“加载”
另一个非常不同的事件，load，应该只用于检测完全加载的页面。这是一场难以置信的比赛

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



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



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



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



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



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



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



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



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



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



$(window).on("load", function(){ ... });



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



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



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



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



document.onreadystatechange = ...



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



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



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



<body onload="afterPageLoad();">