正在加载 div 仅在引荐来源网址上可见

Question

我在我的网站上遇到了一个小问题，我正试图解决这个问题。我目前拥有它，因此当用户访问时，加载屏幕 div 会出现在页面上方，然后在加载一组 time/the 页面后逐渐消失，以最新者为准。我希望这个 div 只在第一次访问时出现，并且希望避免 cookie 或任何服务器端。据我了解，我想利用会话存储或引荐来源网址，但尚未成功实施。此外，后续页面的加载屏幕不太显眼且加载速度更快，只有在每个 individual 页面在会话期间被访问一次时才会消失。适用代码为：

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 解决的问题（以及我说这可能不是最佳方法的原因）是，在使用库时，总是有有限数量的加载、解析和执行库时经过的时间。这使得您的 "only appear on the first visit" 要求在 JavaScript 中有点难以完成。如果默认显示，用库代码隐藏，每次进入页面时都会短暂显示。如果默认隐藏，用库代码显示，第一次进入页面时会短暂隐藏。

处理此问题的一种方法是使用嵌入式 JavaScript，它在定义预加载器的 DOM 后立即执行。这样做的缺点是你必须知道如何在没有像 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>

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

正在加载 div 仅在引荐来源网址上可见

loading div only visible on referrer

javascript

preload

sessionstorage