Dec 17, 2011

JQuery Page Loading Popup

In a website whenever a user clicks a link, that user has to wait for seconds to see the new loaded page. In today’s tutorial we will show an interesting popup after the click event occurs and after few seconds the page will load.

This is just an interactive way to load a page; it will take the same time to load as it was before.

The basic HTML Code:
[html]
<div style="display: none;" id="overlay"></div>
<div style="display: none;" id="popup">
<img src="loading.gif" />
</div>

<a href="www.webstutorial.com/jquery-page-loading-popup/jquery" id="link">Click Here</a>
[/html]

The JQuery code:

[js]
<script type="text/javascript">
$(document).ready(function(){
jQuery("#link").click(function(event) {
event.preventDefault(); //to stop the default loading
var a_href = $('#link').attr('href'); // getting the a href link
jQuery("#overlay").css('display','block'); // displaying the overlay
jQuery("#popup").css('display','block'); // displaying the popup
jQuery("#popup").fadeIn(500); // Displaying popup with fade in animation
setTimeout(function() {
jQuery("#popup").fadeIn(4000); //function to redirect the page after few seconds
window.location.replace("http://"+a_href); // the link
}, 3000);
});
});
</script>
[/js]


Try the Demo, and suggestions are always open.

7 comments :

  1. Thanks for this awesome tutorial! It's very straight forward and I was able to use it on my website. Thanks again!

    ReplyDelete
  2. Thanks for the code and the demo - I have tried to use with multiple links but it seems it picks up the id for the first link such that the links under that redirect to the destination of the first link.  I tried using "class" instead of "id" and also added multiple id's eg.

    (".link").add(".link1").click(function(event)

    but that did not work for me
    thanks

    ReplyDelete
  3. Do you have a working demo of it or can you email me the file which you tried. You can email me admin@webstutorial.com

    ReplyDelete
  4. I responded yesterday but my post was redirected to the moderator so I will post again

    i put up an example at a temporary site I named 
     linkload  (dot)   tumblr  (dot)   com

    ReplyDelete
  5. Your approach was wrong for multiple popup, when ever you want a jquery for multiple elements always use functions. Embed your code into  function, I did it for you. You can find it over here http://codepaste.net/imc3zf

    ReplyDelete
  6. Thanks and very kind of you to provide the actual code. .

    ReplyDelete
  7. Techmaster27/9/12 6:30 AM

    Its really not a preloader the next page still has to load is there a way to show the preloader until the next page loads fully then display the loaded page

    ReplyDelete