preloader на JS

[serg1911]

Приветствую. Есть такая задача:
снабдить анимационным прелоадером процесс перехода между страницами сайта (субмиты форм тоже нужно учитывать).

Решил задачу при помощи события window.onbeforeunload, но вот опера не захотела нормально работать, решение посмотрел на страничке с багами и решил примерно таким способом для оперы

$('a').bind('click', function(){$.fancybox.showLoading();})
$('form').bind('submit', function(){$.fancybox.showLoading();})

и вроде все норм, но вот в чем беда, при переходе по ссылке анимация не крутится а показывает только первый кадр, я попытался написать так:

$('a').bind('click', function(){
$.fancybox.showLoading();
 setTimeout(function(href){
                document.location.href = href;
                }, 500, this.href);
                return false;
})

Но проблема не решилась, пол секунды покрутилась и потом при изменении document.location.href все равно замерзает анимация
Посоветуйте чего нибудь плз!

[trikadin]

Если я правильно понял, что вам нужно, то у вас есть только один вариант - перерисовывать странички ручками (т.е. из JS), подтягивая данные аяксом и меняя url через pushState. Тогда и анимацию можно запилить, и старлеток с покером.

[serg1911]

trikadin, не это не вариант из-за одного браузера делать аякс для аплода не кошерно. Нужно чтобы при переходе между страницами сайта появлялась анимация (я беру её из фансибокса), проблема в том, чтобы не замерзала анимация, когда происходит переход по ссылке на сайте (причем только когда я запускаю анимацию из события $('a').bind('click', ...).

[trikadin]

serg1911, у вас нету других вариантов, просто вы этого не понимаете. Разберём, как происходит переход на другую страницу сайта (грубо):
- Вы нажимаете на ссылку (к примеру)
- Обрабатывается событие onclick ссылки - т.е., выполняется ваш скрипт, начинает что-то там крутиться. Если событие по умолчанию для браузера не отменено - начинается переход на другую событие (следующие пункты)
- Выполняется событие onbeforeunload - т.е выполняется ваш скрипт, если таковой был. Ещё что-то начинает крутиться.
- Текущая страница стирается целиком - т.е. останавливается действие всех скриптов, удаляется весь DOM. Т.е., ваша анимация перестаёт крутиться.
- Загружается новая страница - для неё выстраивается DOM, загружаются картинки и так далее.

Вывод очевиден: ваша анимация обречена на прерывание в момент стирания всего DOMа текущей страницы. Следовательно, если вы хотите, чтобы она не прерывалась, единственный вариант - всё делать через аякс.

Я же предлагаю не делать этого вовсе - браузер и так нормально анимирует процесс загрузки новой страницы.

[serg1911]

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;  
    }
    
});

[trikadin]

Анимация стопорится только при клике на ссылку, а если вызывается субмит формы то работает идеально. Эти события браузер по разному что ли обрабатывает?

Нет, перезагрузка страницы происходит в любом случае. То, что у вас "всё работает идеально", означает лишь то, что следующая страница быстро грузится и продолжает анимацию загрузки.

Попробуйте выложить вашу страничку на какой-нибудь хостинг - вы увидите, что ваш код будет тормозить в любом браузере.

[serg1911]

Ясно, спасибо. А иначе как нибудь можно еще прелоадер подобный сделать?

[trikadin]

А иначе как нибудь можно еще прелоадер подобный сделать?

Я бы для начала задался вопросом, а есть ли в этом смысл. Пользователь и так знает, что перейдёт на другую страницу и надо подождать. Анимировать это смысла нет.

[bes]

загружайте во фрейм, после загрузки распахивайте фрейм на весь экран и так на всех страницах, чем дольше ходишь по ссылкам, тем больше вложенных фреймов получится

[trikadin]

bes, а я искренне хотел, чтобы ему никто не рассказал об этом.

Правда, ты какое-то странное предложил решение. Достаточно сделать фрейм один раз, а в родителе установить скрипт, который будет выдавать на весь экран загрузку при перезагрузке фрейма.

Но то, что это очень убого - факт.