Javascript:页面加载完成后运行函数，脚本加载异步

转载作者：行者123 更新时间：2023-11-29 16:57:16

26

4

我找不到可靠的方法来确定页面何时完成加载。我当前的代码如下所示:

function pageLoaded(callback) {
    function completed() {
        document.removeEventListener('DOMContentLoaded', completed);
        callback();
    }

    if (document.readyState === 'complete') {
        callback();
    } else {
        document.addEventListener('DOMContentLoaded', completed);
    }
}

问题是 DOMContentLoaded在 document.readyState 之前被解雇设置为“完成”，这意味着永远不会调用回调。

当我的函数运行时 DOMContentLoaded已经被解雇了但是document.readyState === 'interactive' .但是我不认为我可以在 document.readyState === 'interactive' 时运行我的回调。由于these possible issues .

不幸的是，由于使用了异步，我认为我无法制作演示。此外，这不会 100% 发生，但似乎总是在我进行硬重新加载时发生(我假设与缓存有关)。

请注意，我在我的 <head> 中像这样加载我的脚本:

<script src="script.js" async></script>

最佳答案

我找不到关于这个主题的有用信息，所以我决定做一些测试。我设置了一个节点服务器:

发送 html 文档的开头
等待 5 秒
发送包含图像的其余 html

然后我记录了document.ready的状态和 DOMContentLoaded在每个阶段。我的代码:

var http = require('http');

var server = http.createServer(function(req, res) {
    // Send the first part of the html
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(
        '<!doctype html>' +
            '<html lang="en">' +
                '<head>' +
                    '<meta charset="utf-8">' +
                    '<meta http-equiv="x-ua-compatible" content="ie=edge">' +
                    '<title>JS Ready Test</title>' +
                    '<meta name="description" content="">' +
                    '<meta name="viewport" content="width=device-width, initial-scale=1">' +

                    '<script>' +
                        'console.log(document.readyState);' +

                        'document.onreadystatechange = function () {' +
                            'console.log(document.readyState);' +
                        '};' +

                        'document.addEventListener("DOMContentLoaded", function() {' +
                            'console.log("DOMContentLoaded");' +
                        '});' +
                    '</script>' +
                '</head>' +
                '<body>');
    // Send a bunch of blank spaces so that the browser will load the buffer, if the buffer is too small the browser will wait for more data
    var str = 'Start';
    for (var i = 0; i < 2000; i++){
      str += ' ';
    }
    res.write(str);

    // Wait 5 seconds and send the rest of the data
    setTimeout(function () {
        res.write('Finish<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg"></body></html>');
        res.end();
    }, 5000);
});

// Listen on port 3000
server.listen(3000);

我的测试结果

第一个缓冲区
Chrome (v43)/FF (v39)/IE11: document.ready === 'loading'
IE9/IE10: document.ready === 'interactive'

最终缓冲区
Chrome/FF/IE11: document.ready === 'interactive' , DOMContentLoaded叫做
IE9/IE10: document.ready 没有变化, DOMContentLoaded叫

子资源完成加载(在本例中为图片)
Chrome/FF/IE11: document.ready === 'complete'
IE9/IE10: document.ready === 'complete'

如您所见，IE9 和 IE10 设置为 document.ready === 'interactive'太早了。

一些可能的解决方案

<强>1。忽略 IE9/IE10

if (document.readyState === 'interactive' || document.readyState === 'complete') {
    callback();
} else {
    document.addEventListener('DOMContentLoaded', callback);
}

<强>2。添加DOMContentLoaded在<head>异步脚本之外的文档。这可确保在调用之前附加它。

// In <head>
<script>
    var pageLoaded = false;

    document.addEventListener('DOMContentLoaded', function() {
        pageLoaded = true;
    });
</script>

// In script.js
if (pageLoaded) {
    callback();
} else  {
    document.addEventListener('DOMContentLoaded', callback);
}

<强>3。回退到 load `窗口上的事件。

if (document.readyState === 'complete') {
    callback();
} else {
    // You would need to add a safety so that your functions don't get called twice
    document.addEventListener('DOMContentLoaded', callback);
    window.addEventListener( "load", callback);
}

关于Javascript:页面加载完成后运行函数，脚本加载异步，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31308059/

26

4

0

文章推荐： javascript - 网络请求失败安卓

文章推荐： mysql - 按时间顺序对连接中的数据进行排序以获得最新条目

文章推荐： mysql - 如何获得总和(具体)

文章推荐： mysql - 在sql查询中管理时间和数据

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

Javascript:页面加载完成后运行函数，脚本加载异步

我的测试结果

一些可能的解决方案