Функция JQuery .load() вызывает странную задержку

Question

Я сделал некоторые поиски / устранение неполадок, но безрезультатно. У меня есть простое средство просмотра изображений, и я добавил функцию JQuery .load(), чтобы заставить анимацию ждать, пока изображение не загрузится. Этот аспект прекрасно работает, но он вызвал странную ошибку. Если вы просматриваете картинки со стрелками, начинается странное отставание, которое происходит ДО исчезновения (fadeTo(200,0)). Это не имеет смысла для меня, потому что перед этой строкой нет ничего, что могло бы вызвать отставание.

(обратите внимание, что эта задержка НЕ ​​происходит, когда функция.load () отсутствует)

Вот код JQuery для следующей кнопки (кнопка со стрелкой слева). "LargeImage" - это главное изображение, которое вы видите.

Перейдите по http://www.snowtheband.com/temporary/media.html и нажмите на один из эскизов в разделе "изображение", чтобы перейти к просмотру изображений.

$("#nextButton").click(function(){
    picNumber=parseInt(picNumber);
    if (picNumber<7){
        picNumber+=1;
        picClass="."+picNumber;
        var loadPic="images/photos/"+picNumber+"_large.jpg";
        descText=$(picClass).prop("alt");
        $("#description").fadeTo(200,0,function(){
            $("#description").html(descText).fadeTo(200,1);
        });
        $("#largeImage").fadeTo(200,0,function(){
            $("#largeImage").prop("src",loadPic);
            $("#imagecontainer img").load(function(){
                $("#largeImage").fadeTo(200,1);
            });
        });
    };
});

Answer 1

Это происходит потому, что ваш браузер только начинает извлекать изображение после того, как вы установили свой источник. Только после завершения загрузки изображения load сработает.

Вы должны предварительно загрузить изображение, если хотите, чтобы оно работало гладко.

Answer 2

Чтобы сделать это гладко, пожалуйста, сделайте следующее:

1. Минимизируйте размеры изображений (400-600 КБ на изображение - это довольно много. Вы можете сжать изображения в 1,5-2 раза).
2. Если у вас есть права администратора, попробуйте оптимизировать производительность вашего сервера. Он реагирует медленно.
3. Используйте механизм предварительной загрузки для всех ваших изображений в слайд-шоу. Подробнее о предварительной загрузке читайте в этой теме: Предварительная загрузка изображений с помощью jQuery.

Я рекомендую вам выполнить предварительную загрузку следующим образом:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
$(function() {
    var images = [], i;
    for (i = 0; i < 7; i += 1) {
       images.push("images/photos/" + (i + 1) + "_large.jpg");
    }
    $(images).preload();
});

Обновление: исправлен скрипт. Произошла синтаксическая ошибка.