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

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

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

JavaScript可能会遇到的问题（我说这可能不是最佳方法的原因）是，在使用库时，在加载，解析和执行库的过程中始终会经过有限的时间。 这使您的“仅在首次访问时出现”要求在JavaScript中难以实现。 如果默认显示它并用库代码将其隐藏，则每次访问该页面时都会短暂显示。 如果默认情况下将其隐藏并使用库代码显示，则第一次访问该页面时，它将被短暂隐藏。

解决此问题的一种方法是使用嵌入式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>

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-02 17:31:30

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-02 17:31:30

解决方案1
0 已采纳 2015-09-02 17:31:30