如何使JavaScript页面加载后执行?

我正在执行一个外部脚本，使用<脚本>内<头>。

现在，由于脚本在页面加载之前执行，我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件，我可以挂钩到当我的脚本执行，这将在页面加载触发?

当前回答

有一个关于如何使用Javascript或Jquery检测文档是否已加载的非常好的文档。

使用本地Javascript可以实现这一点

if (document.readyState === "complete") {
 init();
 }

这也可以在区间内完成

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

由Mozilla编写

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

使用Jquery 仅检查DOM是否准备就绪

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

要检查是否加载了所有资源，请使用window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

2015-12-12 08:42:00

其他回答

$(window).on("load", function(){ ... });

.ready()最适合我。

$(document).ready(function(){ ... });

.load()将工作，但它不会等到页面加载。

jQuery(window).load(function () { ... });

对我不起作用，破坏了下一个内联脚本。我也使用jQuery 3.2.1以及一些其他的jQuery叉子。

隐藏我的网站加载覆盖，我使用以下:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

2018-03-08 02:42:57

合理的可移植，非框架的方式让你的脚本设置一个函数在加载时运行:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

2009-04-30 16:59:58

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 = ...

2020-04-06 16:22:49

如果脚本是在文档的<head>中加载的，那么可以在script标记中使用defer属性。

例子:

<script src="demo_defer.js" defer></script>

从https://developer.mozilla.org:

推迟此布尔属性被设置为向浏览器指示脚本意味着在解析文档之后执行，但在解析之前发射DOMContentLoaded。内如果src 属性不存在(即对于内联脚本)，在这种情况下它会没有效果。为实现动态插入脚本使用的类似效果异步= false。具有defer属性的脚本将在它们在文档中出现的顺序。

2014-01-10 08:52:41

看钩文件。jQuery $(document).load(…)

2009-04-30 16:40:17

如何使JavaScript页面加载后执行?

推荐文章

最新文章

标签