等待图像替换，直到加载图像答案

【问题标题】：Wait with image replace until image is loaded等待图像替换，直到加载图像
【发布时间】：2016-07-06 23:26:41
【问题描述】：

我有一个工作脚本（感谢 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 命令后闪烁。新的源图像会在一秒钟左右后出现，这会产生奇怪的效果。我怎样才能防止这种情况发生？

【问题讨论】：

标签： jquery image loading

【解决方案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;
});

【讨论】：

如果它在循环中，请确保将最终的img src设置为image.src，因为它是异步的。否则，它们都将被设置为当时的任何变量。

【解决方案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/

【讨论】：

我认为 jQUery 3 load 有什么不同吗？这只是现在下载图像：D
请注意，在较新版本的 jQuery 上，加载函数必须更改为 image.on('load', function(){ });。
请注意，如果您从 DOM 重用现有的 img 元素，您可能会将多个 onload 回调附加到同一个元素。你可以使用.off('load').on('load', function(){})

【解决方案3】：

使用CSS sprites 以最小的延迟在所有浏览器中工作的最佳方法是。

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

【讨论】：

Sprites 不适用于此，因为这是一个画廊。不过谢谢！