Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   В хроме слайдер ведет себя очень странно (https://javascript.ru/forum/jquery/25292-v-khrome-slajjder-vedet-sebya-ochen-stranno.html)

Alex_meri39 01.02.2012 00:08

В хроме слайдер ведет себя очень странно
 
Здравствуйте!
Написала слайдер с меняющимися фотографиями и текстом.Все замечательно работает,но в хроме такая фигня:
Открываю страницу-все прекрасно синхронно работает.
оставляю вкладку открытой,лазию в просторах интернета в новом окошке минут 10-15,потом
открываю вкладку со слайдером-и о_О в слайдере все асинхронно.Фотографии то исчезают совсем,то появляются,текст тоже как то в хаотичном порядке.
Жду секунд 15-все опять встает потихоньку на свои места,синхронизируется.
В чем мистика?В iE,ff,Opera такого нет,хоть час стой-открываешь страницу слайдер работает как часы.
:blink:

poorking 01.02.2012 00:17

Без кода понять трудно, но симптомы похожи на использование requestAnimationFrame. Потому что когда вкладка не активна RAF останавливает свою работу, а точнее, откладывает отрисовку кадров на потом, но как правило всякие процессы связанные со временем идут дальше, механизм автолисталки и прочее, организованные с помощью таймаутов работают и на неактивной вкладке. И когда вы переключаетесь обратно на свою вкладку, вся анимация что должна была призойти, начинает воспроизводиться, как частный случай. В jQuery например отказались с какой то версии его использовать из за этого, если это так, то попробуйте с помощью таймаутов организовать анимацию.


PS Как то начал вечером писать фотослайдер, до поздна возился, думаю, утром допишу, открыл другую вкладку. Утром открываю вкладку со сладером (а он уже был обучен автолистанию), и это все начало (все что ночью накрутило) с бешеной скоростью анимироваться, бегал он по кругу несколько минут

Alex_meri39 01.02.2012 00:45

Спасибо за ответ)
Вот код,requestAnimationFrame я нигде не использую-может хром его подключает как то по умолчанию?
function theRotator() {
$('div#rotator ul li').css({opacity: 0.0});
$('.show').css({opacity: 1.0});
curr_text=0;
$('#slider_text div:eq('+curr_text+')').slideDown(1000);
kolichestvo = $('div.slider_text').length;
setInterval('rotate()',6000);
}
function rotate() {
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1500);

current.animate({opacity: 0.0}, 1500)
.delay(3000)
.removeClass('show');
if (curr_text==(kolichestvo-1))
{
$('#slider_text div:eq('+curr_text+')').slideUp(1500)
.delay(3000);
curr_text=0;
}
else
{
$('#slider_text div:eq('+curr_text+')').slideUp(1500)
.delay(3000);
curr_text=curr_text+1;
}
$('#slider_text div:eq('+curr_text+')').slideDown(1500);
}
$(document).ready(function() {
theRotator();
});

poorking 01.02.2012 02:03

Вы думаете что не используете RAF, но если у вас jQuery < 1.6 то animate использует

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.


Часовой пояс GMT +3, время: 10:27.