web-dev-qa-db-ja.com

GIFアニメーションのオンロードを停止し、マウスオーバーでアクティベーションを開始します

多数のGIFを含むページがあります。

<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >

探しているもの

1ページの読み込み=>すべてのgifのアニメーションが停止します

2マウスオーバー時=>その1つのGIFのアニメーションが開始されます

3マウスアウト時=>そのgifのアニメーションは再び停止します

これはJqueryで実行できると思いますが、方法はわかりません。

jquerygif
36
denislexic

いいえ、画像のアニメーションを制御することはできません。

各画像の2つのバージョンが必要になります。1つはアニメーション化され、もう1つはアニメーション化されません。ホバーすると、1つの画像から別の画像に簡単に変更できます。

例：

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

更新：

時間が経ち、可能性は変わります。 kritzikatziが指摘したように、画像の2つのバージョンを持つことが唯一のオプションではないため、明らかにキャンバス要素を使用してアニメーションの最初のフレームのコピーを作成できます。これはすべてのブラウザで機能するわけではないことに注意してください。IE 8は、たとえばcanvas要素をサポートしていません。

52
Guffa

私はこの答えが遅いことに気付きましたが、この問題に対するかなりシンプルでエレガントで効果的な解決策を見つけ、ここに投稿する必要があると感じました。

ただし、明確にする必要があると思うことの1つは、マウスオーバーでgifアニメーションを開始せず、マウスアウトで一時停止せず、再度マウスオーバーしたときに続行することです。残念ながら、これをgifで行うことは不可能です。 （次々に表示される一連の画像をgifのように表示することもできますが、gifのすべてのフレームを分解してすべてのURLをスクリプトにコピーすると時間がかかります）

私の解決策は、マウスオーバーで動き始めるように見えるようにすることです。 gifの最初のフレームを画像にして、その画像をWebページに配置し、マウスオーバーで画像をgifに置き換えると、動き始めたように見えます。マウスアウトでリセットされます。

このスクリプトをHTMLのheadセクションに挿入するだけです：

$(document).ready(function()
{
    $("#imgAnimate").hover(
        function()
        {
            $(this).attr("src", "GIF URL HERE");
        },
        function()
        {
            $(this).attr("src", "STATIC IMAGE URL HERE");
        });
});

そして、このコードを、アニメーション化する画像のimgタグに配置します。

id="imgAnimate"

これにより、マウスオーバーでgifがロードされるため、画像が動き始めたように見えます。 （これは、gif onloadをロードするよりも優れています。これは、gifがランダムなフレームで開始されるため、静的イメージからgifへの移行が途切れるからです）

複数の画像のためだけに スクリプトを再作成します 関数を作成します。

<script type="text/javascript">

var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";

$(document).ready(function() {

  $(".img-animate").each(function () {

     $(this).hover(
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
        },
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));  
        }
     );

  });

});
</script>

</head>
<body>

<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >

</body>

このコードブロックは、静的な画像を表示し、ホバー時にgifを読み込んで表示する機能的なWebページです（提供された情報に基づく）。あなたがしなければならないのは、静的画像のURLを挿入することです。

16
Mark Kramer

jQuery plugin freezeframe.js が役に立つと思います。 freezeframe.jsは、自動的にGIFを一時停止し、マウスホバーでアニメーションを再起動するjQueryプラグインです。

代わりに、ページの読み込み時に機能するように簡単に調整できると思います。

8
Hirvesh

おそらく、GIFを停止したいときに置き換える静止画像を用意するのが最善の方法です。

<img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >

$(window).load(function() {
  $(".anim").src("stillimage.gif");
});

$(".anim").mouseover(function {
  $(this).src("animatedimage.gif");
});

$(".anim").mouseout(function {
  $(this).src("stillimage.gif");
});

おそらく、各画像に割り当てることができる静止およびアニメーションgifへのパスを含む2つの配列が必要です。

5
Nick Brunt

これを解決するには、フィルムストリップのように長いストライプを段階的に表示します。その後、任意のフレームでフィルムを停止できます。以下の例（フィドルは http://jsfiddle.net/HPXq4/9/ で利用可能）：

マークアップ：

 <div class="thumbnail-wrapper">
     <img src="blah.jpg">
 </div>

cSS：

.thumbnail-wrapper{
   width:190px;
   height:100px;
   overflow:hidden;
   position:absolute;
}
.thumbnail-wrapper img{
   position:relative;
   top:0;
}

js：

var gifTimer;
var currentGifId=null;
var step = 100; //height of a thumbnail
$('.thumbnail-wrapper img').hover(
   function(){
      currentGifId = $(this)
      gifTimer = setInterval(playGif,500);
   },
   function(){
       clearInterval(gifTimer);
       currentGifId=null;
   }
);

var playGif = function(){
   var top = parseInt(currentGifId.css('top'))-step;
   var max = currentGifId.height();
   console.log(top,max)
   if(max+top<=0){
     console.log('reset')
     top=0;
   }
   currentGifId.css('top',top);
}

明らかに、これはさらに最適化できますが、読みやすさのためにこの例を単純化しました

2
Xananax

Gif画像のアニメーションを再開するには、次のコードを使用できます。

$('#img_gif').attr('src','file.gif?' + Math.random());
2
Антон Баранов

マーククレイマーのよりエレガントなバージョンは、次のようにすることです。

function animateImg(id, gifSrc){
  var $el = $(id),
    staticSrc = $el.attr('src');
  $el.hover(
    function(){
      $(this).attr("src", gifSrc);
    },
    function(){
      $(this).attr("src", staticSrc);
    });
}

$(document).ready(function(){
  animateImg('#id1', 'gif/gif1.gif');
  animateImg('#id2', 'gif/gif2.gif');
});

またはさらに良いのは、データ属性を使用することです。

$(document).ready(function(){
  $('.animated-img').each(function(){
    var $el = $(this),
      staticSrc = $el.attr('src'),
      gifSrc = $el.data('gifSrc');
    $el.hover(
      function(){
        $(this).attr("src", gifSrc);
      },
      function(){
        $(this).attr("src", staticSrc);
      });
  });
});

そして、img elは次のようになります。

<img class="animated-img" src=".../img.jpg" data-gif-src=".../gif.gif" />

注：このコードはテストされていませんが、正常に機能するはずです。

1
Finn Fitzsimons

次のようなサフィックスを追加します。

_$('#img_gif').attr('src','file.gif?' + Math.random());  
_

ブラウザは、ユーザーがページにアクセスするたびに新しい画像をダウンロードせざるを得ません。さらに、クライアントのキャッシュはすぐにいっぱいになる可能性があります。

Chrome 49およびFirefox 45でテストした代替ソリューションを次に示します。
cssスタイルシートで、次のように表示プロパティを「なし」に設定します。

_#img_gif{
  display:'none';
}
_

「$（document）.ready」ステートメントの外側に挿入：

$(window).load(function(){ $('#img_gif').show(); });

ユーザーがページにアクセスするたびに、すべての要素が完全に読み込まれた後にアニメーションが開始されます。これが、gifおよびhtml5アニメーションをシンクロナイズする唯一の方法です。

その点に注意してください：
gifアニメーションは、ページを更新した後に再起動しません（「F5」を押すなど）。
「$（document）.ready」ステートメントは、「$（window）.load」と同じ効果を生成しません。
プロパティ「可視性」は、「表示」と同じ効果を生み出しません。

0
Leonardo Gugliotti

私が知っていることからの唯一の方法があります。

2つの画像があり、最初にgifと実際のgifの最初のフレーム（またはあなたが望むもの）を持つjpegがあります。

Jpegを適切に配置してページをロードし、マウスオーバーでjpegをgifに置き換えます。必要に応じてGIFをプリロードしたり、GIFのロード中に大きなサイズのロードを表示したり、JPEGを置換したりできます。

マウスオーバーでgifを再生し、マウスアウトで停止し、停止したフレームから再生を再開するようにバイリニアにしたい場合、javascript + gifコンボでは実行できません。

0
daniels

関連する答えとして、gifの再生回数を指定できます。以下のgifには、3回の再生が関連付けられています（10秒のタイマー、合計30秒の再生）。ページの読み込みから30秒が経過すると、「0:01」で停止します。

ページを更新して、3つの再生すべてを再開します

Gif自体を変更する必要があります。 GIF再生を変更するための簡単なツールがここにあります https://ezgif.com/loop-count 。

ランディングページでのシングルループ再生gifの動作例を見るには、単一の再生gifを使用してこのサイトをチェックアウトしてください https://git-lfs.github.com/

enter image description here

0
Vincent Tang