Подождите с заменой изображения, пока изображение не загрузится

Question

У меня есть рабочий скрипт (спасибо stackexchange!) для обмена изображениями на лету.Я использую это как скрипт галереи.Это выглядит так:

           $(".source a").click(function(e){
                e.preventDefault();
                var $a = $(this);
                $("#targetcontainer img").hide("puff", function(){
                    $(this).attr("src", $a.attr("href")).show("fold");
                });
            });

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

Answer 1

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

$(".source a").click(function(e) {
    e.preventDefault();

    var newSrc = this.href,
        image = new Image();    

    image.onload = function() {
        $("#targetcontainer img").hide("puff", function() {
            $(this).attr("src", newSrc).show("fold");
        });
    }
    image.src = newSrc;
});

Answer 2

В JQuery происходит событие load .

1) Получить изображение.

var image = $("#img");
image.hide();

2) При загрузке что-то сделать.

image.load(function(){
 image.show();
});

3) Измените атрибут src на событие пожарной нагрузки после изменения изображения.

image.attr("src","image.jpg");

Подробнее об этом можно прочитать здесь: http://api.jquery.com/load-event/

Answer 3

Лучший способ заставить это работать во всех браузерах с минимальной задержкой - это использовать CSS-спрайты .

Если это не вариант для вас, вы можете предварительно загрузить изображение куда-нибудь и сделать его невидимым - браузер загрузит изображение раньше и не будет задерживать, когда ваш JQuery ожидает.