完全に読み込まれるまでにGIFアニメーションを開始しないでください

Question

ウェブページに大きなgifアニメーションがあり、読み込みが完全に終了するまで開始しません。それはJavaScript/jQueryを使ってどのように可能でしょうか？

Answer 1

プレースホルダ画像を使用し、アニメーションと交換そのGIF一度GIFは完全にロードされる：

<img id="anim" src="placeholder.gif"> 

JS：

var myanim = new Image(); 
myanim.src = '/img/actions.png'; 
myanim.onload = function() { 
    document.getElementById('anim').src = myanim.src; 
}​ 

http://jsfiddle.net/mblase75/6XTg7/

Answer 2

あなたはCSS（またはプレースホルダに置き換えるJS）とのGIFを非表示にすることができますし、GIFファイルがロードされたときに、あなたが（ショーを発射することができます）

$('img[src$=".gif"]').load(function(){$(this).show())

Answer 3

あなたはjavascriptを使ってgifアニメーションを制御できないため、何らかのハックを実装する必要があります。あなたは最初にそれを隠す必要があります。実際の画像の代わりに、実際の画像の寸法と「待機」のようなテキストを含むdivを置くことができます。

画像がブラウザにダウンロードされると、divを画像に置き換えることができます。そしてその時点でアニメーションが始まります

Answer 4

完全に読み込まれるまで非表示にすることができます。ここ

<!--- this uses jquery !--> 

<script type="text/javascript"> 

    var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif"; 

    var image = $('<img />').load(function(){ 

     $(this).show(); 

    }).attr('src', image_url).hide(); 

    $('body').append(image); 

</script> 

問題は本当に特定のフレームからそれを開始するどのような方法があるように思われない、画像がダウンロードされた後（すなわち、それは、ブラウザのキャッシュにある）ということです。