Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2012, 23:16
Новичок на форуме
Отправить личное сообщение для serg1911 Посмотреть профиль Найти все сообщения от serg1911
 
Регистрация: 24.09.2012
Сообщений: 5

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

Решил задачу при помощи события 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 все равно замерзает анимация
Посоветуйте чего нибудь плз!
Ответить с цитированием
  #2 (permalink)  
Старый 25.09.2012, 00:31
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Если я правильно понял, что вам нужно, то у вас есть только один вариант - перерисовывать странички ручками (т.е. из JS), подтягивая данные аяксом и меняя url через pushState. Тогда и анимацию можно запилить, и старлеток с покером.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 25.09.2012, 01:35
Новичок на форуме
Отправить личное сообщение для serg1911 Посмотреть профиль Найти все сообщения от serg1911
 
Регистрация: 24.09.2012
Сообщений: 5

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

Последний раз редактировалось serg1911, 25.09.2012 в 01:46.
Ответить с цитированием
  #4 (permalink)  
Старый 25.09.2012, 02:48
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

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

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

Я же предлагаю не делать этого вовсе - браузер и так нормально анимирует процесс загрузки новой страницы.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #5 (permalink)  
Старый 25.09.2012, 10:39
Новичок на форуме
Отправить личное сообщение для serg1911 Посмотреть профиль Найти все сообщения от serg1911
 
Регистрация: 24.09.2012
Сообщений: 5

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;  
    }
    
});
Ответить с цитированием
  #6 (permalink)  
Старый 25.09.2012, 13:17
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

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

Попробуйте выложить вашу страничку на какой-нибудь хостинг - вы увидите, что ваш код будет тормозить в любом браузере.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2012, 16:09
Новичок на форуме
Отправить личное сообщение для serg1911 Посмотреть профиль Найти все сообщения от serg1911
 
Регистрация: 24.09.2012
Сообщений: 5

Ясно, спасибо. А иначе как нибудь можно еще прелоадер подобный сделать?
Ответить с цитированием
  #8 (permalink)  
Старый 26.09.2012, 19:36
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сообщение от serg1911
А иначе как нибудь можно еще прелоадер подобный сделать?
Я бы для начала задался вопросом, а есть ли в этом смысл. Пользователь и так знает, что перейдёт на другую страницу и надо подождать. Анимировать это смысла нет.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #9 (permalink)  
Старый 26.09.2012, 23:01
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

загружайте во фрейм, после загрузки распахивайте фрейм на весь экран и так на всех страницах, чем дольше ходишь по ссылкам, тем больше вложенных фреймов получится
Ответить с цитированием
  #10 (permalink)  
Старый 27.09.2012, 00:22
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

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

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

Но то, что это очень убого - факт.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Конфликтуют js скрипты в Opera romka AJAX и COMET 2 28.05.2012 15:32
Разное оформление для посетителей с JS и без fry2 Events/DOM/Window 13 03.02.2012 16:45
Не получается передать переменную из JS в PHP Lion_astana AJAX и COMET 2 23.11.2010 17:23
помогите задать переменную в js bsgroupua Общие вопросы Javascript 3 01.02.2010 18:28