I have a basic page with a navigation bar on top, and a wrapper body.
Whenever a user clicks on a navigation link it uses .load
to load the page content into the wrapper div.
$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();}); $(this).ajaxEnd(function(){$('progressbar').hide();}); $('.ajaxspl').on('click',function(e){ e.preventDefault(); var url=$(this).data('url'), wrap=$('body #wrap'); //clean the wrapper wrap.slideUp().html(''); //load page into wrapper wrap.load(url,function(){wrap.slideDown();}); });
Example of return value from .load
:
<div> ...content </div> <script>$('.progressbar .bar').css('width','30%');</script> <link href="/assets/css/datepicker.css" rel="stylesheet" /> <script>$('.progressbar .bar').css('width','60%');</script> <link href="/assets/css/main.css" rel="stylesheet" /> <script>$('.progressbar .bar').css('width','90%');</script> <script>//blah blah</script>
As you can see, I have a Bootstrap progress bar that I show on ajaxstart()
, and on the page that I call I modify that value of the progress bar after each item is loaded.
This works nicely on Firefox and I can see the progress bar while waiting for the page to load, but it does not work on Chrome or IE.
Is there a better way to do this? Am I doing this correctly or is there another method to do this?
For example, getting $.ajax
page size in kb and update progress bar on the fly as data is received?
I am trying to produce something similar to the Loading page when Gmail is loading.
Allow me to refer you to this page , it desribes how you can add a progress event
listener to the xhr object (which only works in these browsers, in older browsers you simply have rely on the same base you're currently using) in jquery.
For reference I have copied the relevant code below (you would only be interested in the 'Download progress' part probably):
$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with upload progress console.log(percentComplete); } }, false); //Download progress xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with download progress console.log(percentComplete); } }, false); return xhr; }, type: 'POST', url: "/", data: {}, success: function(data){ //Do something success-ish } });
Do allow me to say though that this is a lot of overkill for a single page website and only really becomes useful for large files. Additionally images and similar media aren't handled in this way and you would need to monitor the loading of images (or do it yourself through ajax) to make such a system perfect.
Here is a JSFiddle showing this in action: http://jsfiddle.net/vg389mnv/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With