重放GIF動畫/重新加載GIF點擊

我有一個很大的GIF動畫，我在顯示一個加載圖標，直到加載GIF。一旦它加載GIF顯示。很好用，但我想添加一個「重放」按鈕來觸發GIF重放（重新加載）。重放GIF動畫/重新加載GIF點擊

代碼加載和GIF：

HTML

<div id="loader" class="loading img-center"></div>

CSS

#loader { 
width: 600px; 
height: 450px; 
margin: auto; 
} 

#loader.loading { 
    background: url(/Images/ajax-loader.gif) no-repeat center center; 
    width:32px; 
    margin:auto ; 
}

var $j = jQuery.noConflict(); 
$j(function() { 
    var img = new Image(); 
    $j(img) 
    .load(function() { 
    $j(this).hide(); 
    $j('#loader') 
     .removeClass('loading') 
     .append(this); 

    $j(this).fadeIn(); 
    }) 
.error(function() { 
    }) 
.attr('src', '/2012/images/august/sailboat.gif'); 
});

上面的代碼工作正常。現在的「重放」或「刷新」的代碼，不工作：

HTML

<a id="refresh" href="#"> Replay Animation </a>

$j(function() { 
    $j("#refresh").click(function() { 
    $j("#loader").load("/2012/images/august/sailboat.gif") 
    }) 
})

我知道有一些錯誤與JS，但由於我缺乏JS的技能，我不知道該怎麼做或嘗試。任何幫助或建議非常感謝！

謝謝！

來源

2012-08-07 L84

而是通過這一切的麻煩，爲什麼不只是編輯實際的gif圖片重演去的。 – elclanrs 2012-08-07 05:17:32

@elclanrs - 因爲GIF中有文本，所以我希望用戶可以控制何時重播。 – L84 2012-08-07 05:18:24

檢查：

$j("#refresh").click(function() { 
    $j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif"); 
});

正如在以前的代碼你內#loader所以，$('#loader').load(..)行不通追加圖像。在#loader內找到圖像，然後更改該圖像的src。

來源

2012-08-07 05:19:19 thecodeparadox

感謝您的幫助，但沒有奏效。 – L84 2012-08-07 05:24:46

知道了！ - 我有''中的代碼，並且必須將它放在HTML下面的''中。 – L84 2012-08-07 05:48:02

你也可以在需要時追加時間戳，以避免緩存圖像加載：

$j("#refresh").click(function() { 
    var timestamp = new Date().getTime(); 
    $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp); 
});

來源

2012-08-07 05:21:24

避免緩存會使加載指示符毫無意義。它只需要重新下載它 – Eric 2015-12-14 00:31:24

重放GIF動畫/重新加載GIF點擊

回答

相關問題