Подмена изображения

Question

В галерее товаров у меня есть выбор, выбрать цвет предмета, серию или вид сбоку.Каждый вариант имеет свою картинку.Когда я нажимаю одну из этих опций, я выполняю src-замену изображения, для эффекта, который я использую fadeIn / fadeOut, это выглядит так:

$('button').click(function(){
 $('img').fadeOut("slow",function(){
 $(this).attr("src",newSRC);
 $(this).fadeIn("slow");
});
});

, но когда fadeIn завершенауспеть нарисовать , даже если он уже загружен в кеш и выглядит очень странно для галереи сайта домофоны

Я не могу использовать preCache всех изображений, потому чтоесли продуктов будет насчитываться более 100 наименований, сайт будет загружаться целый день, в основном случае при низких соединениях.Я хотел полностью удалить элемент, а затем использовать загрузку, но не могу удалить элементы, потому что галерея рухнет (это гибкий сайт, я не могу удалить элементы, все рухнет).Теперь я сделал небольшой гиф, но ... лицевая сторона, извините.

Так что, по вашему мнению, может быть лучшим решением?

Answer 1

Я бы подождал, пока загрузится следующее изображение, прежде чем оно исчезнет, ​​например:

var loadFail;
$('button').click(function(){
    $('img').fadeOut("slow",function(){
        $(this)
         .attr("src",newSRC)
         .load(function(){
            $('img').fadeIn("slow");
            clearTimeout(loadFail);
         });
        loadFail = setTimeout(function(){
            $('img').fadeIn("slow");
        }, 4000);
    });
});

Answer 2

Я бы сразу начал загружать новое изображение (во временный объект изображения) по щелчку, чтобы оно стало доступным раньше (возможно, даже до завершения fadeOut), а не ждать, пока оно действительно понадобится, чтобы начать загрузку , Это приведет к загрузке изображения в кэш браузера, поэтому оно будет загружено сразу после назначения src реального изображения, и будет меньше ожидания:

$('button').click(function(){
    var imgLoaded = false, fadeDone = false;
    var fadeTarget = $('img');

    // fadeIn the new image when everything is ready
    function fadeIfReady() {
        if (imgLoaded && fadeDone) {
            fadeTarget.attr("src", newSrc).fadeIn("slow");
        }
    }

    // create temporary image for starting preload of new image immediately
    var tempImg = new Image();
    tempImg.onload = function() {
        imgLoaded = true;
        fadeIfReady();
    };
    tempImg.src = newSrc;

    // start the fadeOut and do the fadeIn when the fadeOut is done or 
    // when the image gets loaded (whichever occurs last)
    fadeTarget.fadeOut("slow",function(){
        fadeDone = true;
        fadeIfReady();
    });
});