jQuery Loading Animation doesn't work

Question

I'm facing a little problem with following solution of Jonathan Sampson: jQuery “Please Wait, Loading…” animation?

I'm using jQuery 2.1.3 and I can't seem to get it work.

$body = $("body");
$(document).ajaxStart(function () {
    $("body").addClass("loading");
    $('.modal').fadeIn(500);
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
    $('.modal').fadeOut(500);
});

My footer.php looks like this. All links are working and I don't even get an error.

<div class="modal"><!-- Place at bottom of page --></div>       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/Magnific-Popup-master/dist/jquery.magnific-popup.js"></script>
<script src="js/kswedberg-jquery-smooth-scroll-dc770ba/jquery.smooth-scroll.js"></script>
<script src="js/main.js"></script>

When I add the "loading" class manually in firebug to my body it is working. So I assume it's an jQuery problem. Would really appreciate some help.

Is `$.ajax()` called ? `"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3 /jquery.min.js"` space after "2.1.3" ? — guest271314, Feb 08 '15 at 22:49
To be honestly I don't know, it's my first time working with ajax. Isn't an ajax request sent everytime I reload the my page? I thought on click in the js fiddle was just to demonstrate it easier. — Raphael Lechner, Feb 08 '15 at 22:52
I want the ajax event starts to be fired everytime someone is (re)loading my page. How would I do that? — Raphael Lechner, Feb 08 '15 at 22:56
Call `$.ajax()` , see _"**When an ajax event starts**, we add the "loading" class to the body. and when events are done, we remove the "loading" class from the body."_ at http://stackoverflow.com/a/1964871/2801559 ? , or try http://api.jquery.com/ready . If possible , can post included `html` , `js` ? — guest271314, Feb 08 '15 at 23:01
Yeah I get that, but as I already wrote at the beginning I thought an ajax event starts everytime you reload the page. My problem is now, I want the ajax to be fired everytime I reload how do I do that. By simply adding `$.ajax()`? I just uploaded the current js, you can see it [here](http://www.raphaellechner.com/). — Raphael Lechner, Feb 08 '15 at 23:09
Yes . If requirement is to utilize `$.ajax` `events` , could call `$.ajax()` at each page load — guest271314, Feb 08 '15 at 23:11
So do I have to call ajax on load? Could you probably write a code snippet it's not working for me with that method. — Raphael Lechner, Feb 08 '15 at 23:20
I just checked it again and it's working now. The request was just so short that I couldn't see it at first. — Raphael Lechner, Feb 08 '15 at 23:27
My problem is following now: It's just appearing for a mere second, but I want it to be seen as long as the site's content is still loading (the images for example). I thought this ajax method is just an jQuery alternative for the native javascript? `window.addEventListener( 'load', function load() { window.removeEventListener('load', load, false); document.body.classList.remove('loading'); }, false); ` — Raphael Lechner, Feb 08 '15 at 23:43
Yes . The `duration` property of `fadeIn` , `fadeOut` is total 1 second ; or `500` , `500` respectively . Description of requirement at OP appear to seek solution for displaying notification for `$.ajax()` request ? , not displaying notification during loading of multiple assets at page load ? — guest271314, Feb 08 '15 at 23:50
Yeah it SHOULD be 1 second in total, but the fade isn't working at all. Its just a milisecond that it appears. As i wrote, I linked the preloader animation I was having problems with. Thats what I want to achieve, just a simple loader that appears till the iamges are loaded for most of the users (i know you cant really track it for everyone). If that doesnt work I guess I just want to show the loader for 1-2 seconds is that possible? — Raphael Lechner, Feb 09 '15 at 00:09
If open `console` , select `network` tab , view `timeline` section , perhaps possible to "see" assets loading / load time. Total page load time appear 27-30 seconds ; `iphone-bubble.png` taking 30 seconds alone to load . Try changing `fadeIn` , `fadeOut` to between `14000` - `15000` each . — guest271314, Feb 09 '15 at 00:29
As i said before already, the fade isn't working at all, there was no 1 second fade before and there is no fade now, it just ignores the fade and shows the modal div for a mere second, i uploaded it as well. — Raphael Lechner, Feb 09 '15 at 08:12
Remove `DOMContentLoaded` , replace with original `ajaxStop` . The piece at OP not necessarily implemented for loading all assets . Viewed `network` tab at `console` ? Tried adjusting `fadeIn` , `fadeOut` durations to `14000` each ? — guest271314, Feb 09 '15 at 08:22
I already removed the `DOMContentLoaded`. I'm not saying "The fade is not working" just for fun. I tried it out and it just doesn't work. Maybe "find" is not working at all. — Raphael Lechner, Feb 09 '15 at 08:27
It seems to work now, I'll try to decrease the loading time a bit now and probably adjust the fade time according to that. Thanks a lot for the hard work, I really appreciate it! — Raphael Lechner, Feb 09 '15 at 08:55

guest271314 · Accepted Answer · 2015-02-08T23:21:23.403

1

Try

$(document).on({
   ajaxStart: function() {
     $("body").addClass("loading").find(".modal").fadeIn(500)
   },
   ajaxStop: function() {
     $("body").removeClass("loading").find(".modal").finish().fadeOut(500)
   }
 }).ready(function() {
   $.ajax({url:"", method:"HEAD"})
 });

$(document).on({
   ajaxStart: function() {
     $("body").addClass("loading").find(".modal").fadeIn(500)
   },
   ajaxStop: function() {
     $("body").removeClass("loading").find(".modal").finish().fadeOut(500)
   }
 }).ready(function() {
   $.ajax({url:"http://lorempixel.com/0/0/", method:"HEAD"})
 });

.modal {
  font-size: 36px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="modal">modal</div>

edited Feb 08 '15 at 23:21

answered Feb 08 '15 at 22:57

guest271314

1
15
104
177

Thanks for the suggestion! I don't know why, but it's not working on [my page](http://www.raphaellechner.com/). And it's also just fading in the modal at the beginning, so there is no ajax right? Whats the whole point of the tutorial I posted at the beginning then? – Raphael Lechner Feb 08 '15 at 23:03
@RaphaelLechner Content within `.modal` at http://www.raphaellechner.com/ appear to be comment node `` ? – guest271314 Feb 08 '15 at 23:08
Yes, there is no need for content inside the modal-div. Everything else is is added through css. I just need the "loading" class to be added to the body of the page when the page is loading. – Raphael Lechner Feb 08 '15 at 23:12

jQuery Loading Animation doesn't work

1 Answers1