完成页面加载后执行功能

121

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

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

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

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

javascript  html  image 
— 内拉吉·库玛（Neeraj Kumar）
source
1
您可以在JSFiddle.net上添加一个演示吗？
— 有些盖伊
2
您可以使用jQuery吗？如果是这样，请尝试$(window).load()
— Matt Hintzke，2012年
是的，您能确切解释哪些功能无法正常运行吗？您是否遇到错误，或者您是alert在窗口重绘之前调用一个函数（使其看起来像在加载之前被调用）？该代码看起来不错，并且强迫用户下载大型库可能无法解决此问题或使其更易于诊断。
— 杰弗里·斯威尼
— Jeffrey Sweeney
当我说它不起作用时，我的意思是即使加载了某些图像，该功能也会被触发。
— Neeraj Kumar 2012年

Answers:

166

这可能为您工作：

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);
— 什雷达尔
source
12
jQuery ready不会执行OP要求的操作。ready在DOM加载时触发，而不是在元素加载后触发。load将在元素完成加载/渲染后触发。
— 海梅·托雷斯
好像OP希望全部加载所有元素，而不仅仅是HTML。
— 杰弗里·斯威尼
3
@shreedhar，否则他可以使用正确的工具完成工作（load）。
— 海梅·托雷斯
14
setTimeout是个坏主意。它依赖于3秒钟以内的页面加载（或n秒取决于您选择的值）。如果加载时间更长，则无法正常工作；如果页面加载速度更快，则无需等待即可。
— JJJ
1
@ChristianMatthew其useCapture 如果为true，则useCapture指示用户希望启动捕获。启动捕获后，所有指定类型的事件都将分派给注册的侦听器，然后才分派给DOM树中其下的任何EventTarget。在树中冒泡的事件不会触发指定使用捕获的侦听器。有关详细说明，请参见DOM 3级事件。
— Shreedhar '16
52

的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 = ...
— 托杜亚
source
1
这个跨浏览器是否受支持
— bluejayke
这个答案比其他答案要好得多。+1
— Xydez
很好！谢谢。
— Farzin Kanzi
34

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

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

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

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

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

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

$(window).load(function () {
  // run code
});
— 海梅·托雷斯（Jaime Torres）
source
1
jQuery load方法不只是使用Javascript将函数绑定到load事件吗？这与OP所做的有什么不同？
— 亚历克斯·卡利基
@AlexKalicki AFAIK没什么不同，除了jQuery可以使用addEventListener而不是绑定DOM0 onload属性。
— Alnitak
@AlexKalicki我不能说它使用完全相同的功能，但是根据文档，jQuery确保在此触发之前加载包括图像在内的所有元素。我倾向于相信，在这种情况下，将会有更多的逻辑，而且我没有理由不相信文档，尽管我从未遇到过OP报告的同一问题。
— 海梅·托雷斯
4
从JQuery v1.8开始，不建议使用.load。 来源
— Adonis K. Kakoulidis
1
有史以来最好的解决方案。
— 罗伯托·塞普尔韦达·布拉沃
29

我有点困惑，页面加载完成，“ DOM加载”还是“内容加载”的含义是什么？在html页面中，两种类型的事件之后，load可以触发事件。

  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')
})
— 哈尼夫
source
2
这是唯一为OP提供非jQuery解决方案的答案，并有明确的解释
— Velojet
@Hanif DOMContentLoaded事件处理程序似乎对我load没有任何帮助，但可以。
— 布兰登·贝内菲尔德'18
1
最后两个示例在行尾是否不需要分号？
— R. Navega '18
11

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

<body onload="callFunction();">
....
</body>
— 用户名
source
7

通过这种方式，您可以处理两种情况-页面是否已加载：

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

就我所知，您最好打赌

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

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

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

至于readystatechange，它会在事件发生之前readyState根据MDN进行更改时触发load。

完成

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

— 瑞安·沃克（Ryan Walker）
source
2 
window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}
— 电视
source
2
尽管此代码段可能是解决方案，但包括说明确实有助于提高帖子的质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。
— yivi '17
@yivi，如果这不是自动消息：对任何人来说，代码的含义特别明显，尤其是因为代码中有注释
— 。.– bluejayke
1

如果您已经在使用jQuery，则可以尝试以下操作： 

$(window).bind("load", function() {
   // code here
});
— 桑托什
source
4
没有解释就没用。
— Daniel W.
1

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

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

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

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

MakerMikey

— 米歇尔·莫罗
source
0

试试这个jQuery：

$(function() {
 // Handler for .ready() called.
});
— djserva
source
1
jQuery ready不会执行OP要求的操作。ready在DOM加载时触发，而不是在元素加载后触发。load将在元素完成加载/渲染后触发。
— 海梅·托雷斯
0

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

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);
展开摘要

— MH
source
0

我倾向于使用以下模式来检查文档是否完成加载。该函数返回一个Promise（如果您需要支持IE，则包括polyfill），该文档将在文档完成加载后解析。它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);
— 保罗·罗
source
-1

我正在使用网络组件，因此对我有用：

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});
— 二聚体
source
-3

在body标签完成后放置您的脚本...有效...

— 卡良
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.