7

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

4

4 に答える 4

7

プレースホルダー画像を使用し、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/

于 2012-11-15T14:34:31.367 に答える
1

CSSを使用してGIFを非表示にする（またはJSでプレースホルダーに置き換える）ことができ、GIFが読み込まれると、show（）を起動できます。

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

于 2012-11-15T14:32:56.663 に答える
1

完全にロードされるまで非表示にすることができます。

<!--- 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>

ここでの問題は、画像がダウンロードされると（つまり、ブラウザのキャッシュにあると）、特定のフレームから画像を開始する方法が実際にはないように見えることです。

于 2012-11-15T14:44:02.117 に答える
0

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

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

于 2012-11-15T14:38:22.153 に答える