完成页面加载后执行函数

IT技术 javascript html image
2021-02-05 17:21:01

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

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

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

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

6个回答

这可能对你有用:

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);
setTimeout是个坏主意。它依赖于页面加载时间低于 3 秒(或n秒,取决于您选择的值。)如果加载时间更长,它将无法工作,如果页面加载速度更快,它将不得不无缘无故地等待。
2021-03-20 17:21:01
看起来 OP 希望完全加载所有元素,而不仅仅是 HTML。
2021-03-22 17:21:01
@shreedhar 或者他可以使用正确的工具来完成工作 ( load)。
2021-04-01 17:21:01
@ChristianMatthew 其useCapture 如果为 true,则 useCapture 表示用户希望启动捕获。启动捕获后,指定类型的所有事件将被分派到注册的侦听器,然后再分派到 DOM 树中它下面的任何 EventTarget。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。有关详细说明,请参阅DOM Level 3 Events
2021-04-05 17:21:01
jQueryready不会执行 OP 要求的操作。ready在 DOM 加载时触发,而不是在元素加载后触发。load将在元素完成加载/渲染后触发。
2021-04-10 17:21:01

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 = ...
要么删除您的答案,要么删除其他骗子,但不要通过将其转换为链接来破坏它。
2021-03-28 17:21:01
是否支持这个跨浏览器
2021-04-01 17:21:01
2021-04-08 17:21:01

我有点困惑,您所说的页面加载完成、“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')
    })
    
最后两个示例在行尾不需要分号吗?
2021-03-15 17:21:01
这是这里唯一为 OP 提供非 jQuery 解决方案的答案,并有明确的解释
2021-03-20 17:21:01
#2 是我需要的,完美运行。
2021-03-28 17:21:01
@HanifDOMContentLoaded事件处理程序似乎对我load没有任何作用,但确实如此。
2021-03-30 17:21:01

如果您可以使用 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
};
这个问题的最佳解决方案。
2021-03-22 17:21:01
@AlexKalicki 我不能说它使用完全相同的功能,但根据文档,jQuery 确保在触发之前加载所有元素,包括图像。如果是这种情况,我倾向于相信会有额外的逻辑,并且我没有理由不相信文档,尽管我从未遇到过 OP 报告的相同问题。
2021-03-23 17:21:01
jQueryload方法不是只是使用 Javascript 将函数绑定到加载事件吗?这与 OP 已经在做的事情有什么不同?
2021-03-24 17:21:01
@AlexKalicki AFAIK 不会有任何不同,除了 jQuery 可能使用addEventListener而不是绑定 DOM0onload属性。
2021-04-03 17:21:01
从 JQuery v1.8 开始,.load 已被弃用。 来源
2021-04-05 17:21:01

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

<body onload="callFunction();">
....
</body>
试过了,没用。使用 document.addEventListener('DOMContentLoaded', function() { // 你的代码在这里 }, false); 作品。
2021-03-20 17:21:01