Question

我有一个小问题，我想在我的网站上解决。我目前正在使用，以便在用户访问时在页面上方显示加载屏幕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。如果我在这里做了一些可怕的错误，这是完全合理的，或者需要工作演示，请告诉我。

谢谢！

Answer 1

您可以使用the sessionStorage object完成所需的操作。在该对象中，您可以跟踪当前会话中访问过的页面。

您可以使用JavaScript遇到的问题（以及我说它可能不是最佳方法的原因）是，当使用库时，在加载，解析库时总会有一段有限的时间过去并执行。这使得您的＆＃34;仅出现在第一次访问时＃34;在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/

加载div仅在引用者上可见

1 个答案: