首先，我四处搜索并发现了一些与我正在寻找的东西接近的东西，但没有任何东西可以帮助我找到解决方案。我有一个专业的登录页面，使用了大量高分辨率图像和东西，所以我想在用户看到它之前预加载它，以便它顺利进入。我正在使用下面的 Javascript(我发现)加载它。但我不认为当前的 Javascript 实际上是在显示它之前预加载 Index.HTML。下面的 javascript 是从 Preloader.html 加载的，我也会在下面显示该代码。
预加载.js
(function() {
var preload = document.getElementById("preload");
var loading = 0;
var id = setInterval(frame, 64);
function frame() {
if(loading == 100) {
clearInterval(id);
window.open("index.html", "_self");
return false;
} else {
loading = loading + 1;
if (loading == 90) {
preload.style.animation = "fadeout 1s ease";
}
}
}
})();
预加载器.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="preload" id="preload">
<div class="logo">
</div>
<div class="loader-frame">
<div class="loader1" id="loader1"></div>
<div class="loader2" id="loader2"></div>
</div>
</div>
<script type="text/javascript" src="js/preload.js"></script>
</body>
</html>
我很确定这是因为我是 javascipt 的完全菜鸟，它只执行 window.open 而没有实际跟踪正在预加载的 index.html 页面。但是我在网上找不到任何东西来证实这一点。我相信我的 preload.js 现在所做的只是使用 else 语句的延迟计时器，然后它打开 index.html 而没有实际预加载。
感谢您的宝贵时间，干杯!
最佳答案
这里发生的事情是当计数器达到 100% 时“加载”页面，然后您要求浏览器加载页面。实际上没有进行预加载，因为需要加载的只是页面本身。总结一下。
- 加载器页面“加载”自己
- 加载器页面显示一些动画
- 当计数器达到 100 时，代码要求浏览器导航到另一个页面
- 浏览器打开页面并开始加载真实内容
您需要将所有这些代码放在您的页面中，没有正确的方法知道从您的网站加载的百分比，但您可以使用此函数知道它何时加载:
<script>
window.onload = function() {
alert('page finished loading all images, css and js!');
hideOverlay();
};
</script>
使用此函数隐藏您的 overlayElement，如下所示:
function hideOverlay() {
document.querySelector('#preload').style.display = 'none';
}
关于javascript - 从另一个页面预加载 Index.HTML - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42143334/