完成页面加载后执行功能[重复]

Question

我正在使用以下代码在页面加载后执行一些语句。

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

但是这段代码不能正常工作。即使正在加载某些图像或元素，也会调用该函数。我想要的是调用页面完全加载的函数。

Answer 1

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

同样适用于 jQuery：

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

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

---

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

document.onreadystatechange = ...

Answer 2

如果您可以使用 jQuery，请查看load。然后，您可以将函数设置为在元素完成加载后运行。

例如，考虑一个带有简单图像的页面：

<img src="book.png" alt="Book" id="book" />

事件处理程序可以绑定到图像：

$('#book').load(function() {
  // Handler for .load() called.
});

如果需要加载当前窗口上的所有元素，可以使用

$(window).load(function () {
  // run code
});

如果您不能使用 jQuery，则纯 Javascript 代码基本上是相同数量（如果不是更少）的代码：

window.onload = function() {
  // run code
};

Answer 3

不用jquery也可以这样试试

window.addEventListener("load", afterLoaded,false);
function afterLoaded(){
alert("after load")
}

Answer 4

我倾向于使用以下模式来检查文档是否完成加载。该函数返回一个 Promise（如果您需要支持 IE，请包含 polyfill），该 Promise 将在文档完成加载后解析。它在下面使用setInterval，因为使用setTimeout 的类似实现可能会导致非常深的堆栈。

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

当然，如果你不必支持IE：

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

使用该功能，您可以执行以下操作：

getDocReadyPromise().then(whatIveBeenWaitingToDo);

Answer 5

据我所知，你最好使用

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

使用DOMContentLoaded 事件的第一个答案是倒退了一步，因为 DOM 将在所有资产加载之前加载。

其他答案推荐setTimeout，我强烈反对，因为它完全取决于客户端的设备性能和网络连接速度。如果某人的网络速度较慢和/或 CPU 速度较慢，则加载页面可能需要几到几十秒，因此您无法预测 setTimeout 需要多少时间。

对于readystatechange，它会在readyState 发生变化时触发，根据MDN 仍将在load 事件之前发生。

完成

状态表示加载事件即将触发。

Answer 6

您也可以在下面尝试。

$(window).bind("load", function() { 
// code here });

这在所有情况下都有效。这只会在加载整个页面时触发。

Answer 7

我可以告诉你，我找到的最佳答案是在 </body> 命令之后放置一个“驱动程序”脚本。它是最简单的，并且可能比上面的一些解决方案更通用。

计划：在我的页面上是一张桌子。我将带有表格的页面写入浏览器，然后使用 JS 对其进行排序。用户可以通过单击列标题来使用它。

在表格结束</tbody> 命令和正文结束后，我使用以下行调用排序 JS 以按第 3 列对表格进行排序。我从网络上获取了排序脚本，所以它是此处不再转载。至少在接下来的一年里，你可以在static29.ILikeTheInternet.com 看到它在运行，包括 JS。点击页面底部的“这里”。这将打开另一个包含表格和脚本的页面。您可以看到它放置了数据然后快速对其进行排序。我需要加快速度，但现在基本已经有了。

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

创客麦克

Answer 8

我有点困惑，您所说的页面加载完成，“DOM 加载”或“内容加载”是什么意思？在 html 页面加载可以在两种类型事件之后触发事件。

1. DOM 加载：确保整个 DOM 树从头到尾加载。但不能确保加载参考内容。假设您通过img 标签添加了图像，因此此事件确保所有img 已加载但没有正确加载图像。要获得此事件，您应该编写以下方式：

   document.addEventListener('DOMContentLoaded', function() {
      // your code here
   }, false);
   

   或者使用jQuery：

   $(document).ready(function(){
   // your code
   });
   

2. 在 DOM 和内容加载之后：也表示 DOM 和内容加载。它不仅可以确保img 标记，还可以确保加载所有图像或其他相关内容。要获得此事件，您应该编写以下方式：

   window.addEventListener('load', function() {...})
   

   或者使用 jQuery：

   $(window).on('load', function() {
    console.log('All assets are loaded')
   })
   

Answer 9

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

Answer 10

如果你已经在使用 jQuery，你可以试试这个：

$(window).bind("load", function() {
   // code here
});

Answer 11

这样您就可以处理这两种情况 - 无论页面是否已加载：

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

Answer 12

在完成页面加载设置超时后调用函数

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

Answer 13

这可能对你有用：

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

或 如果您对 jquery 感到满意，

$(document).ready(function(){
// your code
});

$(document).ready() 在 DOMContentLoaded 上触发，但此事件在浏览器中的触发不一致。这就是为什么 jQuery 很可能会实施一些繁重的变通方法来支持所有浏览器。这将使使用纯 Javascript“精确”模拟行为变得非常困难（但当然不是不可能）。

正如 Jeffrey Sweeney 和 J Torres 所建议的，我认为在触发如下函数之前最好有一个 setTimeout 函数：

setTimeout(function(){
 //your code here
}, 3000);

Answer 14

如果您想在 html 页面中调用 js 函数，请使用 onload 事件。当用户代理完成加载 FRAMESET 中的窗口或所有框架时，会发生 onload 事件。该属性可以与 BODY 和 FRAMESET 元素一起使用。

<body onload="callFunction();">
....
</body>

Answer 15

在body标签完成后放置你的脚本......它可以工作......

Answer 16

试试这个jQuery:

$(function() {
 // Handler for .ready() called.
});