Once upon a time I used to load all of my javascript in the head tag using script includes as the page loaded. Times are a changin', and now we have AMD devices such as RequireJS; Now I can write my JS in modules and load them as and when I need.
When loading all my JS on page load, I normally had some kind of UI control to indicate resources were being loaded. After having converted to RequireJS, this loading time has been divided into smaller more intermittent load times. The problem I've experienced is that sometimes a JS resource gets loaded really slowly, or perhaps it's just big or complicated. For whatever reason, it's not important.. The most important thing is to keep the user updated with whats happening, to have a responsive and active UI.
If a user clicks a button, which indirectly requires remote/new resources, then the response to that button click will only come to pass after RequireJS can download all the required resources. If this response time is too long, then this can confuse the user and/or lead to frustration. Actually,.. whenever I do any XHR or remote requests I want to have the same consistent active UI feedback telling the user what (or something) is happening.
Enter loading.js - A completely over-thought device to display feedback on your UI when it requires the user to wait. You can download all the code from GitHub or you can find a streamlined version of what you're looking for below.
I have tested in the current versions of Chrome (desktop & mobile), Firefox, IE, Safari (desktop & mobile). I don't have much intent in creating fixes for historical versions just yet,.. however I will happily accept pull requests.
Download
Example Usage
JQuery & RequireJS
| <html><head> | |
| <script src="require.js"></script> | |
| <script> | |
| (function(){ | |
| require(['jquery', 'loading-jq-office-r-min'], function($, loading) { | |
| $('#btnRequest').click(function() { | |
| var anim = loading.start($('#btnRequest')); | |
| fakeXHR('goesNowhere.php', function(result) { | |
| $('#txtResult').val(result); | |
| anim.stop(); | |
| }); | |
| }) | |
| }); | |
| function fakeXHR(url, callback) { | |
| setTimeout(function(){callback('This is some pseudo XHR content. Random number: '+Math.random());}, Math.random()*1000+500); | |
| } | |
| })(); | |
| </script> | |
| </head> | |
| <body> | |
| <button id="btnRequest">XHR Request</button> <br /> | |
| <textarea id="txtResult" cols="35" rows="3"></textarea> | |
| </body> | |
| </html> |
JQuery & SeaJS
| <html><head> | |
| <script src="sea.js"></script> | |
| <script src="jquery.js"></script> | |
| <script> | |
| $(function(){ | |
| function fakeXHR(url, callback) { | |
| setTimeout(function(){callback('This is some pseudo XHR content. Random number: '+Math.random());}, Math.random()*1000+500); | |
| } | |
| seajs.use('loading', function(loading) { | |
| $('#btnRequest').click(function() { | |
| var anim = loading.start($('#btnRequest')); | |
| fakeXHR('goesNowhere.php', function(result) { | |
| $('#txtResult').val(result); | |
| anim.stop(); | |
| }); | |
| }) | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <button id="btnRequest">XHR Request</button> <br /> | |
| <textarea id="txtResult" cols="35" rows="3"></textarea> | |
| </body></html> |
Mootools with no module loader
| <html><head> | |
| <script src="mootools.js"></script> | |
| <script src="loading-mt-office-x-min.js"></script> | |
| <script> | |
| window.addEvent('domready', function(){ | |
| $('btnRequest').addEvent('click', function() { | |
| var anim = loading.start($('btnRequest')); | |
| fakeXHR('goesNowhere.php', function(result) { | |
| $('txtResult').set('text', result); | |
| anim.stop(); | |
| }); | |
| }) | |
| function fakeXHR(url, callback) { | |
| setTimeout(function(){callback('This is some pseudo XHR content. Random number: '+Math.random());}, Math.random()*1000+500); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <button id="btnRequest">XHR Request</button> <br /> | |
| <textarea id="txtResult" cols="35" rows="3"></textarea> | |
| </body></html> |
No comments:
Post a Comment