从另一个页面预加载Index.HTML-Javascript

Question

首先，我到处搜索，发现一些东西与我要找的东西很接近，但没有任何东西可以帮助我找到解决方案。 我有一个专业的着陆页，其中使用了很多高分辨率的图像和内容，因此我想在用户看到它之前对其进行预加载，以使其顺利进入。 我正在使用下面的Javascript（我发现）来加载它。但是我不认为当前Javascript实际上是在显示它之前预先加载了Index.HTML。 下面的javascript是从Preloader.html加载的，我也会在下面显示该代码。

preload.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";

            }
        }
    }


})();

Preloader.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而不实际对其进行预加载。

谢谢您的宝贵时间，干杯！

Answer 1

这是在计数器达到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';
}

从另一个页面预加载Index.HTML-Javascript

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-09 17:55:20

从另一个页面预加载Index.HTML-Javascript

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-09 17:55:20

解决方案1
0 已采纳 2017-02-09 17:55:20