jQuery: fading in a webpage only once

Question

I have a simple script to fade in the homepage of the website, something like:

jQuery(document).ready(function(){    
  $('body.home').hide();
  $('body.home').fadeIn('slow');
});

However, I would like the script to work only one time, once the website loads initially. On subsequent clicks when, say, a user goes to a secondary page and then returns to the homepage, I don't want the homepage to fade in again, it should be just homepage loading without fading.

Is there a way to do it with just jQuery code, maybe somehow execute the function only once and then stop it from executing? Any tips and code snippets will be greatly appreciated!

Answer 1

You could set a cookie.

$(function () {
  if ($.cookie("loaded") != "true") {
      $('body.home').hide().fadeIn('slow');
      $.cookie("loaded", "true");
  }
});

Answer 2

If you're loading "other parts" of your site only via AJAX calls, you can store a value in global javascript namespace which just indicates that you already executed that action.

Otherwise, you're doing a complete page refresh (redirect to another site) there is no clean javascript solution. In that case you need to store a cookie, make usage of the local storage or bring your server script into play.

Answer 3

you could dive into the world of php and check to see if a session exists, if there in not one.. fade in. I could post some code if you wanted to go down this route

A quick read if your new to php and sessions: http://www.tizag.com/phpT/phpsessions.php