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, а я искренне хотел, чтобы ему никто не рассказал об этом.
Правда, ты какое-то странное предложил решение. Достаточно сделать фрейм один раз, а в родителе установить скрипт, который будет выдавать на весь экран загрузку при перезагрузке фрейма. Но то, что это очень убого - факт. |
Цитата:
Цитата:
|
Спасибо всем, разобрался.
|
<html>
<head>
<title></title>
<script type='text/javascript'>
function showContent(link, block_id, loading_id)
{
var cont = document.getElementById(block_id);
var loading = document.getElementById(loading_id);
cont.innerHTML = loading.innerHTML;
<!-- Здесь изменения до перехода, например: cont.style.opacity = '0,2'; -->
var http = createRequestObject();
if( http )
{
http.open('get', link);
http.onreadystatechange = function ()
{
if(http.readyState == 4)
{
<!-- Здесь изменения после перехода, например: cont.style.opacity = '1'; -->
cont.innerHTML = http.responseText;
}
}
http.send(null);
}
else
{
document.location = link;
}
}
function createRequestObject()
{
try
{
return new XMLHttpRequest();
}
catch(e)
{
try
{
return new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{
try
{
return new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e)
{
return null;
}
}
}
}
</script>
</head>
<body id="body">
<div id="loading"></div>
<div id="content">
<span onclick='send_message("content.php", "content", "loading");'>Next Page</span>
</div>
</body>
</html>
|
Jex, сурово) Сделайте красивее.
|
<html>
<head>
<title></title>
<script type='text/javascript'>
function showContent(link, block_id, loading_id){
var cont = document.getElementById(block_id);
var loading = document.getElementById(loading_id);
cont.innerHTML = loading.innerHTML;
<!-- Здесь изменения до перехода, например: cont.style.opacity = '0,2'; -->
var http = createRequestObject();
if( http ){
http.open('get', link);
http.onreadystatechange = function (){
if(http.readyState == 4){<!-- Здесь изменения после перехода, например: cont.style.opacity = '1'; -->
cont.innerHTML = http.responseText;}}
http.send(null);}else{document.location = link;}}
function createRequestObject(){try{
return new XMLHttpRequest();}
catch(e){try{
return new ActiveXObject('Msxml2.XMLHTTP');}
catch(e){try{
return new ActiveXObject('Microsoft.XMLHTTP');}
catch(e){return null;}}}}
</script>
</head>
<body id="body">
<div id="loading"></div><div id="content"><span onclick='send_message("content.php", "content", "loading");'>Next Page</span></div>
</body>
</html>
Как мог, как сказать, так сказать) |
| Часовой пояс GMT +3, время: 19:28. |