等待图像替换，直到图像加载完毕

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/< /a>

Answer 3

在所有浏览器中以最小的延迟实现此功能的最佳方法是使用 CSS sprites 。

如果这不适合您，您可以在某处预加载图像并使其不可见——浏览器将提前加载图像，并且在 JQuery 执行时不会延迟。