建議交換GIF動畫而不讓它們凍結？

我正在使用動畫圖形顯示信息的網站上工作。所有的圖表都是GIF動畫。對於動畫圖有一個點，並且經常圖形具有多個部分。所以主要的功能是能夠點擊圖表，讓它播放一次，再次點擊圖表，然後第二部分播放，等等，直到它到達最後部分並再次播放。建議交換GIF動畫而不讓它們凍結？

問題是有時圖形會凍結或不加載。他們只能在每次點擊時播放一次。通常情況下圖形會切換到下一個圖形，但它會被凍結而無法讓它播放。

我試圖在加載新圖之前加載一個空白src，它似乎停止凍結GIF，但導致並在新圖形加載之前導致破碎的圖像閃現。

這是我使用的交換圖形代碼...

$('.rightPostContent img').click(function(){   
     imgSrc = $(this).attr('src'); 
     if(imgSrc.indexOf('_B.png') != -1){ 
      imgSrcToUse = imgSrc.replace('_B.png','_pt1.gif'); 
      $(this).attr('src',imgSrcToUse); 
      return false; 
     } 
     if(imgSrc.indexOf('_pt1.gif') != -1){ 
      var POS2 = imgSrc.replace('_pt1.gif','_pt2.gif'); 
      var $that = $(this); 
      $.ajax({ 
       url:POS2, 
       type:'HEAD', 
       error: function() 
       { 

        var imgSrcToUse = imgSrc.replace('_pt1.gif','_pt1.gif'); 

        $that.attr('src',''); 
        $that.attr('src',imgSrcToUse); 

        return false; 

       }, 
       success: function() 
       { 
        $that.attr('src',''); 
        $that.attr('src',POS2); 
        return false; 
       } 
      });  

     } 
     if(imgSrc.indexOf('_pt2.gif') != -1){ 
      var POS3 = imgSrc.replace('_pt2.gif','_pt3.gif'); 
      var $that = $(this); 
      $.ajax({ 
       url:POS3, 
       type:'HEAD', 
       error: function() 
       { 

        var imgSrcToUse = imgSrc.replace('_pt2.gif','_pt1.gif'); 
        $that.attr('src',imgSrcToUse); 
        return false; 

       }, 
       success: function() 
       { 
        $that.attr('src',''); 
        $that.attr('src',POS3); 
        return false; 
       } 
      });  

     } 
     if(imgSrc.indexOf('_pt3.gif')!=-1){ 
      imgSrcToUse = imgSrc.replace('_pt3.gif','_pt1.gif'); 
      $(this).attr('src',''); 
      $(this).attr('src',imgSrcToUse); 
      return false; 
     } 

    });

你可以在http://schoolhousebalk.com/justin-upton/

在行動中看到該網站的任何提示，將不勝感激。

來源

2013-02-18 patricko

嘗試在將其添加到src屬性之前預加載新圖像。例如，而不是僅僅$(this).attr('src',imgSrcToUse);：

var img = new Image(); 
var $el = $(this); 
img.src = imgSrcToUse; 
img.onload = function() { 
    $el.attr('src', imgSrcToUse); 
}

來源

2013-02-18 16:00:55 bfavaretto

我試過這一個第一個圖，它仍然凍結... – patricko 2013-02-18 16:08:50

我會立即加載所有這些，隱藏/點擊時顯示的圖像。如果你點擊它們，總是會有某種延遲。

來源

2013-02-18 16:02:37 Machinegon

關於這一點的事情是，我不知道有多少圖像與每個圖相關聯。可能會有一兩個或三個GIF。所以點擊時，我正在檢查下一個是否存在，如果沒有，則重新加載第一個。 – patricko 2013-02-18 16:05:31

我檢查你的例子很快，我不會建議這個，如果我們說有成千上萬的圖像加載，但如果你有20-30圖像和圖像相對較小，你可以檢查許多存在的負載，加載現有的並將它們放置在頁面某處的隱藏分區中。點擊發生時，您會檢查相關隱藏部門內部要交換的圖像。它是否做出敏感？ – Machinegon 2013-02-18 16:13:28

是的它是有道理的。在我完成這個之前，你知道swap是否會導致gif每次從頭開始加載？因爲如果交換與替換源一樣，那麼它會導致類似的問題。 – patricko 2013-02-18 16:15:03

建議交換GIF動畫而不讓它們凍結？

回答

相關問題