Jquery loading screen

Question

I am lost with this idea of mine. I have never made a loading screen and do not even know where to begin.

Here is the call I am making:

$('.ranks').change(function () {
                if (this.checked) {
                    getRanks($(this).val());
                }
            });

Here is the function:

function getRanks(rankid) {
            $.getJSON('message_center_getMessageLists.asp', { rankid: rankid }, function (json) {
                var options = '';
                $.each(json.rank, function (i, item) {
                    options += '<option value="' + item.distID + '">' + item.name + ' (' + item.distID + ')</option>';
                });
                $('#fromList').find('option')
                        .remove()
                        .end()
                $('#fromList').append(options);
            })
                    .error(function () { alert("There was an error while trying to make this request;  If it persists please contact support"); })
                    ;
        }

I have not been able to get anything working yet, so above is my original code before my attempt. I have the loading.gif. I tried to use toggleClass to add the loading css to the body, but the loading screen appears behind everything, tried to use z-index and that wouldn't bring it out front. I'm at a loss.

Here is the CSS I am using, it was something another individual wrote and I was trying to duplicate his work but am having issues.

.loading{
        background-image:url(newloader.gif);
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-position: center center;
    }

you should post your css for this loading screen. If you apply z-index to a non-positioned element it will do nothing. Try adding position:absolute to it - assuming you haven't already done so. — Kai Qing
– Kai Qing, Commented Mar 9, 2012 at 21:47

orolo · Accepted Answer · 2012-03-09 21:49:43Z

2

Here's how I do it:

css
    .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1;
}

js
$('body').append('<div class="modal">');

I append it on beforeSend() in the ajax call and remove it on success. Something like that.

answered Mar 9, 2012 at 21:49

orolo

3,9532 gold badges32 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Wilson Over a year ago

I just did $('.modal').remove(); hope that is correct. Seems to work.

jordan.baucke · Accepted Answer · 2012-03-09 21:55:07Z

2

James-

http://jsfiddle.net/jordanbaucke/Y3c8c/#base

Use callbacks to trigger the hide and show of your loading gif.

answered Mar 9, 2012 at 21:55

jordan.baucke

4,33810 gold badges61 silver badges78 bronze badges

Comments

The Alpha · Accepted Answer · 2012-03-09 22:01:47Z

2

I've created a fiddle here only to give you an idea. You can use loading('show') at the beginning of your $.getjSON and call loading('hide') inside the callback function at the beginning to hide it again, hope it will help you.

answered Mar 9, 2012 at 22:01

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

kasdega · Accepted Answer · 2012-03-09 22:41:41Z

1

The problem you're having is because you are using $.getJSON(URL, successCallbackFunction). Which is just a rewriting of the jquery $.ajax() function.

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

And the function you define doesn't allow you a way to really control what happens before or after an ajax call.

So the two ways I know of to put up a loading message are to either establish that before (and after) all ajax calls, do something. -OR- you can specify before any individual call. I use this method almost exclusively because of the individual control it gives me.

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: function(data) {
       // put code here for how to handle a successful return.  This should not take the place of the beforeSend.
  },
  beforeSend: function() {
        // put your code here to open the dialog or show something before the ajax is sent
  },
  complete: function() {
       // put your code here to close the dialog or hide something after the ajax is done
  }
});

If you want to look at how to set up your page and jquery ajax calls to do something before any ajax call or after any ajax call is complete you would use $.ajaxStart() or $.ajaxComplete()

All of this is very well documented in the jquery web site.

answered Mar 9, 2012 at 22:41

kasdega

18.9k13 gold badges56 silver badges90 bronze badges

1 Comment

James Wilson Over a year ago

.getJSON has .success() .error() and .complete() methods. I don't know enough to say one is better than the other, just wanted to point out that .getJSON does have those methods available.

mcottingham · Accepted Answer · 2012-08-23 05:11:30Z

1

Here is my $0.02..

I did not want to display a loading image on the screen if the page was going to load within a few milliseconds. I decided that I would bind a show trigger to the $.ajaxStart() and $.ajaxStop() events.

function bindAjaxLoadingGif() {    
    var $dialog = $("<div></div>")
        .html("<center><img src='/images/loading-image.gif' alt='loading' class='block clear-fix' /><p>Loading</p></center>")
        .dialog({
            autoOpen: false,
            title: 'Loading...',
            modal: true,
            width: 350,
            resizable: false
        });


    $dialog
        .bind("delayshow", function (event, timeout) {
            var $self = $(this);
            $self.data('timeout', setTimeout(function () {
                $dialog.dialog("open");
            }, timeout));
        })
        .bind("delayhide", function (event) {
            var $self = $(this);
            clearTimeout($dialog.dialog("close").data('timeout'));
        });

    $dialog
        .ajaxStart(function () {
            $(this).trigger('delayshow', 800);
        })
        .ajaxStop(function () {
            $(this).trigger('delayhide');
        });
}

Then in my document.ready:

$(document).ready(function() { bindAjaxLoadingGif(); });

I setup a delay of 800 milliseconds to ensure that the loading dialog did not flicker.

HTH, Mike

answered Aug 23, 2012 at 5:11

mcottingham

2,0662 gold badges20 silver badges29 bronze badges

1 Comment

James Wilson Over a year ago

I like this approach. I would not want it to show the loading page it it only took a very short time to load as well. Very good solution.

Collectives™ on Stack Overflow

Jquery loading screen

5 Answers 5

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related