等待圖像替換，直到圖像加載

我有一個工作腳本（謝謝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

等待圖像替換，直到圖像加載

回答

相關問題