Question

Am trying to have an image visually echo through from intro page to homepage~which I have sorted, (see other question How to slowly FadeOut an image ON LOAD using jQuery ), but now realise that I have created an irritating effect as the image loads and fades each time the homepage link is clicked.

My question is, how can I have the image load only once, from the intro page?

The visual effect is this…

By clicking my name (link) on the intro page, you get to the homepage, where there is a copy of the name link, which appears briefly, (has the same co-ordinates & with jquery fadeOut applied).

Answer 1

Option 1: Cookies

You can easily keep track of whether it is the first time a user is visiting your site by using cookies. Since you are already using jQuery, you can use the jQuery cookie plugin (available at https://github.com/carhartl/jquery-cookie). In order to keep track of whether to fade in the image or not, you can use this code snippet:

if ($.cookie('hasVisited')) {
  // Don't fade the image in...
} else {
  $.cookie('hasVisitied', 'true');
  // Fade image in...
}

Keep in mind that this will only work if the user accepts cookies. If your want the image to always fade in for users that do not have cookies enabled client side, then that code snippet will work fine. Otherwise, have a look into this post on how to detect if cookies are enabled client side; and if they aren’t, don’t have the image fade in.

Option 2: URL Parameters

If you find that the demographic of your site has a majority of users that do not enable cookies client side, then you can use URL parameters to designate whether to fade the image or not.

Say for example your home page is at /index, then the links in your main menu would link back with /index?nofade=true. Then, in the index page, you can test whether or not the parameter exists using jQuery as demonstrated in this blog post.