等待图像替换,直到加载图像

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属性更改为fire load event.

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

您可以在此处阅读更多相关信息:http://api.jquery.com/load-event/