0

我有一个小问题要在我的网站上解决。我目前拥有它，以便在用户访问时页面上方出现加载屏幕 div，然后在设定的时间/页面加载后消失，以最新的为准。我希望这个 div 只在第一次访问时出现，并且希望避免使用 cookie 或任何服务器端。据我了解，我想利用会话存储或引荐来源网址，但没有成功实施。此外，后续页面的加载屏幕不那么突出，加载速度更快，只有在会话期间每个单独页面都被访问过一次时才会消失。适用的代码是：

CSS：

.js div#preloader {
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    overflow: visible;
    background-color: #202020;}

#preloader {
    z-index: 1000; }

js：

 jQuery(document).ready(function ($) {
 $(window).load(function () {
    setTimeout(function(){
        $('#preloader').fadeOut(1500, function () {
        });

    },5000);

   });  
});

所以很明显我不是很了解；我一边走一边自学，不用说我还有很多东西要学 javascript。如果我在这里做了一些可怕的错误，这是完全合理的，或者需要一个工作演示，请告诉我。

谢谢！

4

1 回答 1

0

您可能可以使用object完成您想要的sessionStorage。在该对象中，您可以跟踪当前会话中访问了哪些页面。

使用 JavaScript 可能会遇到的问题（以及我说它可能不是最佳方法的原因）是，在使用库时，加载、解析和执行库的时间总是有限的. 这使您的“仅在首次访问时出现”要求在 JavaScript 中难以实现。如果你默认显示它并用库代码隐藏它，它会在你每次进入页面时短暂显示。如果你默认隐藏它并用库代码显示它，它会在你第一次进入页面时被短暂隐藏。

处理此问题的一种方法是使用在定义预加载器的 DOM 后立即执行的嵌入式 JavaScript。这样做的缺点是你必须知道如何在没有像 jQuery 这样的库的帮助下编写跨浏览器的 JavaScript。在您的情况下，简单地隐藏预加载器所需的 JavaScript 足够简单，它不应该有任何跨浏览器问题。

我创建了一个简单的页面来演示该技术。此页面的来源是：

<html>
<head>
<style>
#preloader {
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    overflow: visible;
    color: white;
    background-color: #202020;
}
</style>
</head>
<body>
<div id="preloader">Preloader</div>
<script>
if (sessionStorage[location.href]) {
    document.getElementById('preloader').style.display = 'none';
}
sessionStorage[location.href] = true;
</script>
<p>This is the text of the body</p>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
    setTimeout(function(){
        $('#preloader').fadeOut(1500);
    }, 5000);
});
</script>
</body>
</html>

我还为它创建了一个小提琴：http: //jsfiddle.net/cdvhvwmm/

于 2015-09-02T17:31:30.490 回答