Show "Loading image" while page is loading

Question

I'm far from good at jQuery, to start with. I have read these two questions that deal with the subject:

But I wonder how I can manage to show a "Loading text/image" when I press a link which is internal on my site? I have a link running a curl fetching function in PHP which take a while to be run.

The above example (links) deals with the subject if you have a Ajax function to it. Not just a link, which I wan't.

How am I able to accomplish this?

You will not be able to accomplish this unless you modify your site to also load content with AJAX. — Jon, Mar 17 '12 at 20:36
It's not difficult to change a link into an "Ajax function". — Ry-, Mar 17 '12 at 20:36
May be helpful: [How to Display Loading Image While Page Loads using jQuery](https://devnote.in/how-to-display-loading-image-while-page-loads-using-jquery/) — Fefar Ravi, Mar 09 '22 at 12:17

score 13 · Accepted Answer · answered Mar 17 '12 at 20:38

13

HTML

<a  href="someotherpage.php" >Your Link</a>

Script

$(function(){

  $("a").click(function(){
    $(this).after("<img src='loading_image.gif' alt='loading' />").fadeIn();  
  });

});

This code will add a loading image after each link when user clicks on that.

Working example : http://jsfiddle.net/YjWWX/3/

You can get some loading images from http://www.ajaxload.info

answered Mar 17 '12 at 20:38

Shyju

214,206
104
411
497

This seems really neat, but some how can't get it to work. I have following jquery version: jquery-1.7.1.min.js And have implemented the code between . My link look like this Run. Still can't get it to work. Any idea why? – Fredrik Mar 17 '12 at 20:56
@Fredrik: It should be working. I guess you have some other script error in the page. use firebug console tab to see what error you are getting ? try in a simple page and then add your elemtns step by step. then you can findout where is the problem – Shyju Mar 17 '12 at 21:31
I got the right code after some googling. In your example the $(document).ready is not there, that was why it didn't work for me. The right code I got it to work with was: `$(document).ready(function(){ $("a").click(function(){ $(this).after("").fadeIn(); return false; // comment out this to for the link to work }); });` – Fredrik Mar 18 '12 at 21:28
@Fredrik : $(function() { is the short form of $(document).ready(function(){ – Shyju Mar 18 '12 at 21:43
Alright, didn't work with that due. When I changed to the other it worked :) – Fredrik Mar 18 '12 at 22:02

score 6 · Answer 2 · edited Mar 13 '18 at 10:12

CSS:

#spinner
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(Images/Loading.gif) 50% 50% no-repeat #ede9df;
}

JS:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function() { 
        $("#spinner").fadeOut("slow"); 
    });
</script>

HTML:

<!-- HTML -->
<div id="spinner">  </div>

score 0 · Answer 3 · answered May 29 '14 at 10:09

$(window).load(function() { $(".loader").fadeOut("slow"); })

css:

.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); }

html: Note declare div class= 'loader'

score 0 · Answer 4 · answered Oct 26 '16 at 09:57

step 1 => Declare the div in master/layout.cshtml like

 <div class="loader"></div>

step 2 => Add the css :

.loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:url(../images/loader.gif) 50% 50% no-repeat #000;opacity:.75}

step 3=> add the following javascript

$(window).on(function () {
    $(".loader").fadeOut("slow");
});

! function (a)
{   
      jQuery(window).bind("unload", function () { }), a(document).ready(function () {
          a(".loader").hide(), a("form").on("submit", function () {
              a("form").validate(), a("form").valid() ? (a(".loader").show(), a("form").valid() || a(".loader").hide()) : a(".loader").hide()
          }), a('a:not([href^="#"])').on("click", function () {
              "" != a(this).attr("href") && a(".loader").show(), a(this).is('[href*="Download"]') && a(".loader").hide()
          }), a("a:not([href])").click(function () {
              a(".loader").hide()
          }), a('a[href*="javascript:void(0)"]').click(function () {
              a(".loader").hide()
          }), a(".export").click(function () {
              setTimeout(function () {
                  a(".loader").fadeOut("fast")
              }, 1e3)
          })
      })
}(jQuery);

The code will be display the loader when page is laoding,clicked on anchor tag,submit button.best if u add this code in commin js file — Sandip, Oct 26 '16 at 10:04

score 0 · Answer 5 · edited Feb 24 '18 at 12:26

0

Use fadeOut() method to the loader and keep it inside the $(window).load() method.

edited Feb 24 '18 at 12:26

Mohammad Usman

37,952
20
92
95

answered Feb 24 '18 at 12:05

black_code

348
1
2
12

score 0 · Answer 6 · answered Mar 17 '12 at 20:36

you will need to attach a click event using .on() function in Jquery.

<a href='#' div='mylink'>
<div id='loading' style=display:none'>loading...</div>
<script type="text/javascript">
$('#mylink').on('click',$('#loading).show()); 
</script>

Then when you're done loading, you'll want to issue:

$('#loading').hide();

Show "Loading image" while page is loading

6 Answers6