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

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

0 голосов
/ 23 сентября 2011

Проблема, с которой я столкнулся, заключается в том, что 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);
});

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

1 Ответ

1 голос
/ 23 сентября 2011

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

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

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

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

...