等待图像替换，直到加载图像 [英] Wait with image replace until image is loaded

问题描述

我有一个有效的脚本(感谢stackexchange！)用于即时交换图像.我将其用作图库脚本.看起来像这样:

I have a working script (thanks stackexchange!) for exchanging an image on the fly. I use it as a gallery script. It looks like this:

           $(".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命令之后，旧图像会闪烁.新的源Image在大约一秒钟后出现，这产生了怪异的效果.如何防止这种情况发生?

The problem regarding this script is that the old image flickers after the JQ show command. The new source Image shows up a second or so later which makes a weird effect. how can I prevent this from happening?

推荐答案

您可以在尝试显示图像之前预加载图像...

You could preload the image before attempting to display it...

$(".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;
});

这篇关于等待图像替换，直到加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！