gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 16:57:16 26 4
gpt4 key购买 nike

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

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

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

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

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

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

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

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

最佳答案

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

  1. 发送 html 文档的开头
  2. 等待 5 秒
  3. 发送包含图像的其余 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com