画像付きのサイトがあります。画像の一部はアニメーションGIF画像です。私が行ったことは、GIF の静止画像を表示することであり、クリック イベントで実際の GIF 画像が表示されます。
これが私のコードです:
JQuery
$(".theimage").click(function() {
$(this).addClass('hidden');
$(this).next().removeClass('hidden');
});
$(".theimage2").click(function() {
$(this).addClass('hidden');
$(this).prev().removeClass('hidden');
});
HTML
<img class="theimage" src="image_static.gif" alt=""/>
<img class="theimage2 hidden" src="image_animated.gif" alt=""/>
CSS
.hidden{
display:none !important;
}
1 つのページに複数の GIF 画像がある可能性があるため、前の要素と次の要素のクラスを変更しているため、それらすべてに対してアクションが発生しません。
これまでのところ、スクリプトはうまく機能しています。私が実際に達成しようとしているのは、GIF 画像が常に最初から開始されるようにすることです。現時点では、最初の 1 回だけです。その後、バックグラウンドで再生を続けているように見え、2 回目の呼び出しではそのまま再生を続けます。フリーズすることもありますが、キャッシュに関係していると思います。
それで、呼び出されるたびにGIF画像を再ロードすることは可能ですか? 使ってみた
+ new Date().getTime()
しかし、クラスチェンジ時には何の効果もないようです。
何か案は?