Проблема пользовательской анимации JQuery с использованием SetInterval и SetTimeout

Проблема, с которой я сталкиваюсь, заключается в том, что IE и Safari (Mac OS X, а не версия Windows) мерцают изображения во время анимации, а иногда вообще не выполняют анимацию. Google, Firefox и Opera не решают эту проблему после загрузки. Я думаю, что это перезагружает изображение каждый раз, чтобы вызвать мерцание.

Вот тестовый сайт: http://www.yeoworks.cz.cc/otherdomains/theoasis/< /а>

Вот несжатый код JQuery:

$(document).ready(function(){
//LOGO ANIMATION
setInterval( function(){
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr1.png)');
}, 0);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr2.png)');
}, 200);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr3.png)');
}, 300);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr4.png)');
}, 400);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr5.png)');
}, 500);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr4.png)');
}, 600);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr3.png)');
}, 700);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr2.png)');
}, 800);
}, 900);
});

Спасибо за помощь :)


javascript jquery setinterval settimeout
person yanike    schedule 22.09.2011    source источник
comment
Это было первое, что я сделал, но качество ОТСУТСТВУЕТ с gif. Я также пытаюсь отойти от Flash, чтобы анимация не работала ни на одном устройстве с флэш-памятью. Я не могу дождаться apng.   -  person yanike    schedule 23.09.2011

Ответы (1)


arrow_upward
1
arrow_downward

Если анимированный gif (даже с очень небольшим сжатием палитры) по-прежнему не помогает, я бы попробовал другой подход. Это может доставить вам больше хлопот, чем пользы; у меня в сафари бага не бывает, и я правда думаю, что туда можно попасть с тщательно сжатым анимированным gif, но тем не менее...

Вместо того, чтобы каждый раз менять URL-адрес фонового изображения, возможно, IE и Safari работали бы лучше, если бы все изображения существовали на странице (расположены абсолютно друг над другом), и вы вызывали .show() и .hide() соответственно.

Я бы сохранил все эти изображения (или объекты jQuery, содержащие теги <img>) в массиве и создал функцию, которая запускается каждые 100 мс через setInterval. Когда он запускается, .show() «следующее» изображение в массиве, а текущее видимое сообщает .hide().

Таким образом, вы можете быть уверены, что изображение всегда видно в любой момент времени и не мерцает.

person Chazbot    schedule 22.09.2011
comment
Хороший ответ! Я собирался попытаться испортить Z-порядок. Спасибо. Таким образом, я могу сохранить PNG, и они могут сочетаться с любым фоном, который я выберу, если мне нужно изменить сайт по какой-либо причине. - person yanike; 23.09.2011
comment
ах да, z-порядок - это та же основная идея =). Удачи! - person Chazbot; 23.09.2011
comment
Спасибо, я нашел другой способ сделать это с помощью CSS Display: None & Block. - person yanike; 23.09.2011