Last active
May 23, 2019 04:49
-
-
Save clipperhouse/6600675 to your computer and use it in GitHub Desktop.
Trigger the browser's progress spinner via jQuery.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| One disadvantage of ajax is that the user does not see the browser’s progress UI. Typically this is | |
| a spinner that takes the place of the favicon in the browser tab while waiting for assets to download. | |
| I believe this to be an important piece of UI. The browser vendors think so, too, otherwise it wouldn’t | |
| be there. | |
| How to emulate it? By adding an element to the DOM that is waiting to download. Below, this is done | |
| with an iframe. | |
| On you server, you will need a URL that returns slowly. In my case, it’s at the /sleep route and | |
| I call C#‘s Thread.Sleep. | |
| In both the front-end and back-end, I set a timeout at 10 seconds. If an ajax call is taking | |
| longer than that, I’ve got other problems. :) | |
| */ | |
| var browserProgressOn = function () { | |
| var iframe = $('<iframe id=browserProgress src=/sleep>').hide(); | |
| $('body').append(iframe); | |
| setTimeout(browserProgressOff, 10000); | |
| }; | |
| var browserProgressOff = function () { | |
| $('iframe#browserProgress').remove(); | |
| }; | |
| /* | |
| Areas for exploration: | |
| - Seems to have no effect in IE 11 | |
| - Perhaps it can be exposed as a jQuery plugin, and event-driven | |
| - Expose some options | |
| - Maybe iframe isn't the optimal element? | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment