Jquery - FadeIn - отрывистый Fadein

Question

Я сделал простой переключатель изображений, который выцветает и исчезает из разных логотипов. Пример и полный исходный код на http://bit.ly/ewrSgp. Я постепенно уменьшаю изображение, затем ставлю в очередь изменение атрибута src, затем постепенно возвращаюсь обратно. Некоторое время оно работает плавно, но через 20 секунд или около того оно начинает постепенно возвращать изображение перед изменением src, которое затем мгновенно меняется и выглядит некрасиво. Я правильно это делаю?

Код, который запускает изменение:

// fadeout old image, change to new and fadeback in.
// Call function changeimage again.
$(imToChange).fadeOut(600).queue(function (n) {
    jQuery(this).attr('src', newimageSrc);
    n();
}).fadeIn(1000, function () {
    setTimeout(function () {
        //recall image change function
        changeImage(indexToChange);
    }, o.delay);
});

Заранее спасибо.

Answer 1

Я видел некоторые мерцания, но не много. Я заметил, что это произошло на определенном логотипе, я думаю, что в первый раз, когда я увидел его, но не в следующий раз, что заставляет меня думать, что после загрузки все нормально Некоторые мысли:

• Это происходит, если все изображения локальны (и, следовательно, загружаются очень быстро)?
• Вы пробовали предварительно загрузить изображения ?
• Если предварительная загрузка работает, что вы думаете о том, чтобы поместить их всех в спрайт? Сделать только один http запрос.

Answer 2

Другое решение: вместо изменения источника изображения, как насчет использования jQuery .load() или .get() для его замены? Затем вы можете использовать функцию обратного вызова, которая срабатывает только после завершения загрузки, чтобы вернуть ее обратно.

Answer 3

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

Примерно так.

var img = $("<img href='newimage.png' />").load(function() { movit(); fadeit(); });
$("#ahiddenelement").append(img);

Answer 4

Укажите ширину и высоту для тега img .