У меня есть базовая страница с навигационной панелью сверху и тело обертки.
Всякий раз, когда пользователь нажимает на ссылку навигации, он использует .load для загрузки содержимого страницы в обертку 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();}); });
Пример возвращаемого значения из .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>
Как вы можете видеть, у меня есть индикатор выполнения Bootstrap, который я показываю на ajaxstart() , и на странице, которую я вызываю, ajaxstart() это значение строки выполнения после загрузки каждого элемента.
Это хорошо работает в Firefox, и я вижу индикатор выполнения, ожидая загрузки страницы, но он не работает в Chrome или IE.
Есть лучший способ сделать это? Правильно ли я делаю это или есть другой способ сделать это?
Например, получение $.ajax страницы $.ajax в kb и обновление строки выполнения «на лету» при получении данных?
Я пытаюсь создать что-то похожее на страницу загрузки при загрузке Gmail.
Позвольте мне отнести вас к этой странице , он описывает, как вы можете добавить слушателя progress event к объекту xhr (который работает только в этих браузерах , в старых браузерах вы просто полагаетесь на ту же базовую базу, которую используете в настоящее время) в jquery ,
Для справки я скопировал соответствующий код ниже (вас скорее всего интересует часть «Download progress»):
$.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 } });
Позвольте мне сказать, что это много переполнения для одного веб-сайта страницы и только действительно становится полезным для больших файлов. Кроме того, изображения и подобные носители не обрабатываются таким образом, и вам нужно будет контролировать загрузку изображений (или сделать это самостоятельно через ajax), чтобы сделать такую систему идеальной.
Вот JSFiddle, показывающий это в действии: http://jsfiddle.net/vg389mnv/1/
Вышеуказанный ответ правильный (рекомендуется). Пользовательский запрос xhr работает хорошо, я проверил его с вашим кодом (и большим файлом, чтобы увидеть фактический прогресс), также может скопировать его здесь:
$('.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 console.log('starting ajax request'); $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.addEventListener('progress', function(e) { if (e.lengthComputable) { $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%'); } }); return xhr; }, type: 'POST', url: url, data: {}, complete: function(response, status, xhr) { console.log(response) wrap.html(response.responseText); wrap.slideDown(); } }); });