Before you go ahead and implement this, I recommend a few things.
The idea here is to use jQuery’s fadeIn and fadeOut methods on the full body of the website. First let’s take a look at the code, then we’ll go through it.
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery('body').css('display','none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click',function(event){
var thetarget = this.getAttribute('target')
if (thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
//alert(thehref)
window.location = thehref
});
}
});
});
setTimeout(function(){
jQuery('body').fadeIn();
},1000)
</script>
<div id="wrapper">
Lorum Ipsum...
</div>
</body>
So what exactly are we doing here? First, we’re including the jQuery library hosted by google. If you already have jQuery on the site, then you can skip that first line of code.
Even though we’re including jQuery in this example, I personally like to keep with native javascript whenever possible. A lot of people overuse jQuery for unnecessary scripts. On the first line inside of the script, we style the body to have a display of none. The reason I do this through the javascript instead of CSS is for the few people who might not have javascript enabled on their computer (phone / tablet ect.) If we used CSS to give the body a display of none, but the person has javascript disabled, then the site will become completely unusable.
Next is jQuerys classic (document).ready(function(){, which is similar to a window.onload = function{ in native javascript. Inside of the ready function are essentially doing two things.
- On load we fade in the body instead of letting it load line by line as it would naturally
- When an <a> tag is clicked, we first check to see if its meant to open in a new tab (typically an external link)
- If it is, then do nothing, otherwise we prevent the page from immediately disappearing, and instead give it a fadeOut
- Then using
window.locationwe go to the originally intended link - Finally, I use the
setTimeoutas a fallback just in case it takes a really long time for the function to be called.