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

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

来源

2011-04-26 cukabeka

你可以尝试显示它之前预加载图像...

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

来源

2011-04-26 10:58:37 alex

谢谢，这已经解决了我的问题。 – cukabeka 2011-04-28 08:47:16

由于某种原因，我不适合 – NaturalBornCamper 2012-08-17 17:32:02

如果它在循环中，请确保将最终的img src设置为image.src，因为它是异步的。否则，他们将全部被设置为当时的变量。 – FlavorScape 2016-07-13 22:24:42

使用CSS sprites以最少的延迟时间在所有浏览器中工作的最佳方式是使用CSS sprites。

如果这不是您的选择，您可以将图像预加载到某处并使其不可见 - 浏览器会尽早加载图像，并且不会在您的JQuery执行时延迟。

来源

2011-04-26 10:55:12

精灵不工作这个，因为这是一个画廊。虽然谢谢！ – cukabeka 2011-04-28 08:46:48

在jQuery中有负载事件。

1）检索图像。

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

2）On load do something。

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

3）更改src属性为火灾加载事件后图像已更改。

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

你可以在这里阅读更多关于它：http://api.jquery.com/load-event/

来源

2012-04-04 12:25:34

我觉得从jQUery 3加载做了一些不同的事情？这只是现在下载图像：D – ppumkin 2017-01-26 22:45:52

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

回答

相关问题