Javascript 完成页面加载后执行函数_Javascript_Html_Image

Javascript 完成页面加载后执行函数

javascript html image

Javascript 完成页面加载后执行函数,javascript,html,image,Javascript,Html,Image,我使用下面的代码在页面加载后执行一些语句 <script type="text/javascript"> window.onload = function () { newInvite(); document.ag.src="b.jpg"; } </script> window.onload=函数（）{ newInvite（）； document.ag.src=“b.jpg”； } 但是这个代码不能正常工作。即使

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

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

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


window.onload=函数（）{
newInvite（）；
document.ag.src=“b.jpg”；
}

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

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

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

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

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

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

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

这可能适用于您：

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

试试这个：

将脚本放在body标记完成后…它可以工作…

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

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


....

JavaScript jQuery也是如此：

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

如果您已经在使用jQuery，可以尝试以下方法：

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

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

setTimeout（函数（）{
var val=$（'.GridStyle tr:n个孩子（2）td:n个孩子（4）'）。text（）；
for（var i，j=0；i=ddl2.options[j]；j++）{
如果（i.text==val）{
ddl2.selectedIndex=i.index；
打破
}
} 
}, 1000);通过这种方式，您可以处理这两种情况-如果页面已加载或未加载：
document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

我有点困惑，你所说的页面加载完成，“DOM加载”或“内容加载”是什么意思？在html页面加载中，可以在两种类型的事件之后触发事件
DOM加载：确保从开始到结束加载整个DOM树。但不能确保加载引用内容。假设您通过img
标记添加了图像，因此此事件确保加载了所有img
，但没有正确加载图像。要获取此事件，您应按以下方式编写：
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

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

或者使用jQuery：
$(document).ready(function(){
// your code
});


在DOM和内容加载之后：也表示DOM和内容加载。它不仅将确保img
tag，还将确保加载所有图像或其他相关内容。要获取此事件，您应按以下方式编写：
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

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

或者使用jQuery：
$(window).on('load', function() {
 console.log('All assets are loaded')
})


我可以告诉您，我找到的最佳答案是在
命令后面放一个“驱动程序”脚本。这是最简单的，可能比上面提到的一些解决方案更普遍
计划：在我的页面上有一张桌子。我将带有表格的页面写入浏览器，然后使用JS对其进行排序。用户可以通过单击列标题来使用它
在一个
命令结束表并结束正文之后，我使用下面的一行调用排序JS按第3列对表进行排序。我从网上下载了排序脚本，所以这里不复制。至少在接下来的一年里，您可以在static29.ILikeTheInternet.com
上看到这个功能的运行，包括JS。单击页面底部的“此处”。这将显示另一个包含表和脚本的页面。你可以看到它把数据放上去，然后快速排序。我需要加快一点速度，但基本的东西现在已经存在了
</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

sortNum（3）；

MakerMikey
或者，您可以在下面尝试
$(window).bind("load", function() { 
// code here });

这在所有情况下都有效。只有在加载整个页面时才会触发此操作。
据我所知，您最好使用
window.addEventListener('load', function() {
    console.log('All assets loaded')
});

使用DOMContentLoaded
事件的#1答案是倒退，因为DOM将在加载所有资产之前加载
其他答案建议setTimeout
，我强烈反对，因为这完全取决于客户端的设备性能和网络连接速度。如果某人的网络速度较慢，并且/或者cpu速度较慢，则加载一个页面可能需要几到几十秒，因此您无法预测需要多少时间setTimeout

对于readystatechange
，只要readyState
发生更改，它就会根据load
事件之前的更改触发
完成
该状态指示加载事件即将触发
我倾向于使用以下模式检查文档是否完成加载。函数返回一个承诺（如果需要支持IE，则包括），该承诺在文档完成加载后解析。它在下面使用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);

您可以这样尝试，而不必使用jquery

window.addEventListener（“加载”，后加载，假）；
函数后加载（）{
警报（“加载后”）
}
您可以添加一个演示吗？您可以使用jQuery吗？如果是这样，请尝试$（window）.load（）
是的，您能确切地解释一下什么工作不正常吗？您是否遇到错误，或者您在窗口重新绘制之前调用了一个alert函数（使其看起来像是在l之前调用的）
$(window).bind("load", function() { 
// code here });

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

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

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