preloader на JS
Приветствую. Есть такая задача:
снабдить анимационным прелоадером процесс перехода между страницами сайта (субмиты форм тоже нужно учитывать). Решил задачу при помощи события window.onbeforeunload, но вот опера не захотела нормально работать, решение посмотрел на страничке с багами и решил примерно таким способом для оперы $('a').bind('click', function(){$.fancybox.showLoading();}) $('form').bind('submit', function(){$.fancybox.showLoading();}) и вроде все норм, но вот в чем беда, при переходе по ссылке анимация не крутится а показывает только первый кадр:-E, я попытался написать так: $('a').bind('click', function(){ $.fancybox.showLoading(); setTimeout(function(href){ document.location.href = href; }, 500, this.href); return false; }) Но проблема не решилась, пол секунды покрутилась и потом при изменении document.location.href все равно замерзает анимация:help: Посоветуйте чего нибудь плз! |
Если я правильно понял, что вам нужно, то у вас есть только один вариант - перерисовывать странички ручками (т.е. из JS), подтягивая данные аяксом и меняя url через pushState. Тогда и анимацию можно запилить, и старлеток с покером.
|
trikadin, не это не вариант из-за одного браузера делать аякс для аплода не кошерно. Нужно чтобы при переходе между страницами сайта появлялась анимация (я беру её из фансибокса), проблема в том, чтобы не замерзала анимация, когда происходит переход по ссылке на сайте (причем только когда я запускаю анимацию из события $('a').bind('click', ...).
|
serg1911, у вас нету других вариантов, просто вы этого не понимаете. Разберём, как происходит переход на другую страницу сайта (грубо):
- Вы нажимаете на ссылку (к примеру) - Обрабатывается событие onclick ссылки - т.е., выполняется ваш скрипт, начинает что-то там крутиться. Если событие по умолчанию для браузера не отменено - начинается переход на другую событие (следующие пункты) - Выполняется событие onbeforeunload - т.е выполняется ваш скрипт, если таковой был. Ещё что-то начинает крутиться. - Текущая страница стирается целиком - т.е. останавливается действие всех скриптов, удаляется весь DOM. Т.е., ваша анимация перестаёт крутиться. - Загружается новая страница - для неё выстраивается DOM, загружаются картинки и так далее. Вывод очевиден: ваша анимация обречена на прерывание в момент стирания всего DOMа текущей страницы. Следовательно, если вы хотите, чтобы она не прерывалась, единственный вариант - всё делать через аякс. Я же предлагаю не делать этого вовсе - браузер и так нормально анимирует процесс загрузки новой страницы. |
trikadin, спасибо за ответ довольно исчерпывающий. Но есть еще момент! Анимация стопорится только при клике на ссылку, а если вызывается субмит формы то работает идеально. Эти события браузер по разному что ли обрабатывает?
Сейчас есть доступ к исходнику, который используется для вывода анимации: function showPreloader() { $.fancybox.showLoading(); }; function onAnchorClick() { var expr = new RegExp('^(http|https|ftp)\\://[/a-zA-Z0-9_\\-.?=&]*$', 'ig'); //check another page url if(expr.test(this.href)){ showPreloader(); //start animate half second setTimeout(function(href){ document.location.href = href; }, 500, this.href); return false; } return true; } function onFormSubmit() { showPreloader(); return true; } $(function(){ if($.browser.opera){ $('a').bind('click', onAnchorClick); $('form').bind('submit', onFormSubmit); }else{ window.onbeforeunload = showPreloader; } }); |
Цитата:
Попробуйте выложить вашу страничку на какой-нибудь хостинг - вы увидите, что ваш код будет тормозить в любом браузере. |
Ясно, спасибо. А иначе как нибудь можно еще прелоадер подобный сделать?
|
Цитата:
|
загружайте во фрейм, после загрузки распахивайте фрейм на весь экран и так на всех страницах, чем дольше ходишь по ссылкам, тем больше вложенных фреймов получится
|
bes, а я искренне хотел, чтобы ему никто не рассказал об этом.
Правда, ты какое-то странное предложил решение. Достаточно сделать фрейм один раз, а в родителе установить скрипт, который будет выдавать на весь экран загрузку при перезагрузке фрейма. Но то, что это очень убого - факт. |
Часовой пояс GMT +3, время: 09:29. |