Jquery ajax. Как сделать плавную смену изображений и индикацию загрузки?

Question

[Вадим]

Доброго времени суток друзья! Есть у меня что-то наподобие галереи, выглядит так:



Работает следующим образом: щелкаешь на кнопку с шаблоном ткани и загружается картинка из базы данных с соответствующим описанием. Дело в том что смена изображения выглядит не очень хорошо.
В интернете не смог найти подходящего решения. Хотелось бы чтобы изображение появлялось плавно, и пока идет загрузка, появлялся соответствующий индикатор в виде GIF-ки. При этом лучше всего было бы чтобы предыдущее изображение не исчезало пока не загрузится новое. Использую простейший jquery ajax запрос:

$(document).ready(function() {
    $('#select-menu').find('a').click(function() {
        var formData = $(this).attr('href');
        $.ajax({
            type: "GET",
            url: "image.php",
            data: formData,
            cache: true,
            content: "html",
            success: function processData(data) {
                $('#item-wrapper').html(data);
            }
        });
        return false;
    });
});

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

Обращение происходит к этому сценарию:

<?php
if (isset($_GET['cloth']) && isset($_GET['cloth_index'])) {
    $imageCloth = getItemImage($getId, $keyClass, $keySubclass, $getCloth, $getClothIndex);
    if(!empty($imageCloth)) {
        foreach ($imageCloth as $img) {
            $itemCatTitle = $img['catalog_title'];
            $itemTitle =  $img['title'];
            $itemImg = $img['image'];
        }
        ?>
        <div id="item-wrapper">
            <figure>
                <b class="loading"></b>
                <img src="./uploads/catalog/items/<?php echo $itemImg; ?>">
            </figure>
        </div>
    <?php
    }
    else {
        include('noitem.html');
    }
}

Рассматривал такой вариант:
если добавить "beforeSend:" анимацию загрузки, это добавит лишь анимацию загрузки, изображение будет также дергаться. К тому же эта анимация появится перед отправкой данных на сервер, а нужно её вставить, пока принимает данные. Видел множество галерей, где это реализовано, но там немного иначе всё работает. Как быть с подобным запросом? Подскажите пожалуйста!

Answer 1

[Виталий Инчин ☢]

• Посылаем запрос, вызываем GIF
  
• Получаем картинку
  
• Вешаем обработчик ей на событие load, по которому будем возвращать прозрачность и убирать предыдущую картинку и гифку
  (Или если гифка поверх старой картинки, можно ее сразу удалять)
  
• Ставим ей opacity:0
  
• Добавляем в DOM
  

UPD: примерная реализация.

Comments

[Вадим]

Так, запрос отправляется при событии click, а как вызвать GIF после этого? То есть после того как запрос отправлен но картинка ещё не получена?

[Виталий Инчин ☢]

J01: очень просто:
предположим, гифка уже на странице, но скрыта.

//Это все при клике
$(".gifka").show();
$.ajax({
            type: "GET",
            url: "image.php",
            data: formData,
            cache: true,
            content: "html",
            success: function processData(data) {
                $(".gifka").hide();
            }
        });

[Вадим]

Виталий Инчин ☢: Всё гениальное просто) А по поводу события load, дело в том что там не только картинка будет, но и ещё небольшая форма с описанием и всё одним html кодом. Получается для картинки надо сделать :
$( ".img-wrapper").find('img').css('opacity: 0');
$( ".img-wrapper'" ).load( "image.php", function() {
$( ".img-wrapper'" ).find('img').css('opacity: 1');
});
Что-то типа этого?

[Вадим]

А ну да, load тут так не работает, не могу понять только почему

[Виталий Инчин ☢]

J01: ставим dataType : html,
далее на success можно будет сделать...в общем, вот так:

$.ajax({
            type: "GET",
            url: "image.php",
            data: formData,
            dataType: "html",
            cache: true,
            success: function processData(data) {
                var img = $(data).find("img").css("opacity", 0);
                img.on("load", function(){
                    $(this).css("opacity", 1);
                    //Скрыть гифку (, удалить старую картинку)
                });
                $("#block").append(img); //Вставить картинку в DOM
            }
        });

[Вадим]

Виталий Инчин ☢: попробовал сделать так:

success: function processData(data) {
var img = $(data).find("img").css("opacity", 0);
img.on("load", function(){
$(this).css("opacity", 1);
$(".ajax-loader").hide();
$("#item-wrapper").find("img").hide();
});
$("#item-wrapper").append(img); //Вставить картинку в DOM
$(data).find("img").show();
}
});

старая картинка исчезла, а вот новая не появилась, я так понял что он определяет это как одно и то-же изображение, но как сделать чтобы он их отличал?

[Виталий Инчин ☢]

J01: тадам: jsfiddle.net/In4in/8hvd4y96/3

[Вадим]

Виталий Инчин ☢: Большое спасибо! Вы сделали мой день)