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

Posted 2023-03-05

【中文标题】完成页面加载后执行功能[重复]

【英文标题】：execute function after complete page load [duplicate]

【发布时间】：2012-08-09 19:56:09

【问题描述】：

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

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

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

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

【问题讨论】：

你能在JSFiddle.net上添加一个演示吗？

你能用jQuery吗？如果是这样，请尝试$(window).load()

是的，你能准确解释一下什么地方不能正常工作吗？您是否遇到错误，或者您在重绘窗口之前调用了alert 函数（使其看起来像是在加载之前调用的）？代码看起来不错，强制用户下载大型库可能无法解决此问题或使其更易于诊断。

如何确定图片没有加载？我通常通过检查图像的width 是否大于0来进行测试。

这能回答你的问题吗？ How to make JavaScript execute after page load?

【参考方案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 = ...

【讨论】：

是否支持跨浏览器

是的，是caniuse.com/mdn-api_document_readystate

要么删除你的答案，要么删除另一个骗子，但不要通过将其变成链接来破坏它。

【参考方案2】：

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

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

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

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

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

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

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

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

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

【讨论】：

jQuery load 方法不只是使用 Javascript 将函数绑定到加载事件吗？这与 OP 已经在做的有什么不同？

@AlexKalicki AFAIK 并没有什么不同，除了 jQuery 可能使用 addEventListener 而不是绑定 DOM0 onload 属性。

@AlexKalicki 我不能说它使用完全相同的功能，但根据文档，jQuery 确保在此触发之前加载包括图像在内的所有元素。如果是这种情况，我倾向于相信会有额外的逻辑，我没有理由不相信文档，尽管我从未遇到过 OP 报告的相同问题。

从 JQuery v1.8 开始，不推荐使用 .load。 source

这个问题的最佳解决方案。

【参考方案3】：

不用jquery也可以这样试试

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

【参考方案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);

【参考方案5】：

据我所知，你最好使用

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

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

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

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

完成

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

【讨论】：

好，但关于最后一段：readystatechange = 'Complete' 可以假设整个页面和内容（图像、脚本、css）都已加载。虽然是在load 事件之前，但是这里没关系

【参考方案6】：

您也可以在下面尝试。

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

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

【参考方案7】：

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

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

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

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

创客麦克

【参考方案8】：

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

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

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

或者使用jQuery：

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

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

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

或者使用 jQuery：

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

【讨论】：

这是这里唯一为 OP 提供非 jQuery 解决方案的答案，并有明确的解释

@Hanif DOMContentLoaded 事件处理程序似乎没有为我做任何事情，但 load 可以。

最后两个例子不是在行尾需要分号吗？

#2 是我需要的，完美运行。

【参考方案9】：

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

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

@yivi 如果这不是一条自动消息：任何人都很清楚该代码的含义，尤其是因为代码中有 cmets..

【参考方案10】：

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

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

【讨论】：

无用解释。

【参考方案11】：

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

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

【参考方案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);

【参考方案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);

【讨论】：

jQuery 的 ready 不会执行 OP 请求的操作。 ready 在 DOM 加载时触发，而不是在元素加载后触发。 load 将在元素完成加载/渲染后触发。

看起来 OP 希望完全加载所有元素，而不仅仅是 HTML。

@shreedhar 或者他可以使用正确的工具来完成这项工作 (load)。

setTimeout 是个坏主意。它依赖于 3 秒内的页面加载（或 n 秒，具体取决于您选择的值。）如果加载时间更长，它将无法工作，如果页面加载速度更快，它将有无缘无故地等待。

@ChristianMatthew its useCapture 如果为真，useCapture 表示用户希望启动捕获。启动捕获后，指定类型的所有事件将被分派到注册的侦听器，然后再分派到 DOM 树中它下方的任何 EventTargets。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。详细解释见DOM Level 3 Events。

【参考方案14】：

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

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

【讨论】：

试过了，没用。使用 document.addEventListener('DOMContentLoaded', function() // 你的代码在这里 , false);工作。

【参考方案15】：

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

【参考方案16】：

试试这个jQuery:

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

【讨论】：

jQuery 的 ready 不会执行 OP 请求的操作。 ready 在 DOM 加载时触发，而不是在元素加载后触发。 load 将在元素完成加载/渲染后触发。