loading div only visible on referrer

Question

I've got a minor problem I'm trying to resolve on my website. I have it currently so that a loading screen div appears above the page when the user visits and then fades away after a set time/the page is loaded, whichever comes latest. I want this div only to appear on first visit and would prefer to avoid cookies or anything server side. From what I understand I want to utilize session storage or referrer but have not had success with implementing that. Also, subsequent pages have a less prominent and faster loading screen that will have to go away only when each individual page has been visited once during the session. The applicable code is:

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);

   });  
});

So it's likely obvious that I'm not well informed; I'm teaching myself as I go and needless to say I have a lot to learn about javascript. If I've done something horribly wrong here, which is entirely plausible, or a working demo is required, please let me know.

Thanks!

Answer 1

You can probably accomplish what you want using the sessionStorage object . In that object, you can track which pages have been visited in the current session.

The issue you can run into with JavaScript (and the reason I said it may not be the best approach) is that, when using a library, there is always a finite amount of time that passes while the library is loaded, parsed, and executed. This makes your "only appear on the first visit" requirement somewhat difficult to accomplish in JavaScript. If you show it by default and hide it with library code, it will show briefly each time you go to the page. If you hide it by default and show it with library code, it will be briefly hidden the first time you go to the page.

One way to handle this is to use embedded JavaScript that is executed immediately after the DOM for the preloader is defined. The downside to this is that you have to know how to write cross-browser JavaScript without assistance from a library like jQuery. In your case, the JavaScript required to simply hide the preloader is simple enough that it shouldn't have any cross-browser issues.

I created a simple page that demonstrates the technique. The source for this page is:

<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>

I also created a fiddle for it: http://jsfiddle.net/cdvhvwmm/

loading div only visible on referrer

Question

1 answers

solution1
0 ACCPTED 2015-09-02 17:31:30

loading div only visible on referrer

Question

1 answers

solution1 0 ACCPTED 2015-09-02 17:31:30

solution1
0 ACCPTED 2015-09-02 17:31:30