Q&A
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
GIF動画が100個くらいをWebページの1ページに全て静止画として表示したいです。
GIF動画のままだとページが重くなってしまいます。GIF動画を自動で静止画にして表示する方法はありますか？
GIF動画をフリーソフトなどで一つずつjpgなどの静止画に変換すると、ファイルが増え管理が煩雑になるので、それは避けたいと思っています。
回答2件
0
ベストアンサー
######1. ライブラリの使用
【GIFアニメ画像を停止して読み込ませ、クリックで再生させる2つの方法 - WEBをつくる。】
http://webtukuru.com/web/gif-anime-control/
【[JS]アニメーションgifにスタートとストップ機能をつけられるスクリプト -gifplayer | コリス】
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gifplayer.html
下記のようなプラグインと連携させることで自動再生/自動停止が実現できそう。
【【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。】
http://bashalog.c-brains.jp/13/07/25-095600.php
######2. 代替画像を用意してクリックで置き換え
【GIFアニメーションは直接貼り付けずJavaScriptで再生させる | iwb.jp】
https://iwb.jp/gif-animation-play-javascript/
######3. 遅延読み込みでロード時のみ軽量化
※ 他の案に比べてページロード時しか効果が期待できないのでおまけ程度。
【【JavaScript】画像の遅延読み込みを行うライブラリ［Layzr.js］の使い方 - ONZE】
http://on-ze.com/archives/5580
【Lazy Load(画像の遅延読み込み)を実装する方法】
https://syncer.jp/how-to-setting-lazy-load-images
投稿2017/01/31 18:49
総合スコア69398
ありがとうございます！Javascript を使うのは思いつきませんでした。
調べてみて見つからなかったのですが、再生ボタンがあると画像を邪魔してしまうので、再生ボタンを非表示にする方法はあるでしょうか。
どれについていっているのかがわかりませんが、Giffferのことであれば下記部分にスタイルについて記述があるので display:none; とか opacity: 0; とかを設定すれば非表示に出来ると思います。
https://github.com/krasimir/gifffer#styling
0
回答内容に少し誤解があるようなので補足しておきます。
まず、「1. ライブラリの使用」の項目に書かれている2つのライブラリですが、これらも「2. 代替画像を用意してクリックで置き換え」と同じ仕様のものです。
予め代替画像をセットする必要があるため、質問者様の意図には合わないうえ誤解を与えます。
また、質問者様のレスに対しての回答者様のレスで「Gifffer」について触れていますが、そもそも回答内容で Gifffer については一切紹介されていません。
結論をいうと、質問者様の思惑を満たすツールは「Gifffer」のみです。
Gifffer は設置するだけで既存のGIF画像をCanvasとして自動解釈し、静止画（+再生制御）表示してくれるライブラリです。
再生ボタンが邪魔、という点についても、CSSの知識があるか、もしくはGiffferの仕様をよく読めば再生ボタンとかの非表示も出来たと思います。
投稿2017/02/17 06:37
総合スコア6
回答いただき誠にありがとうございます。
Giffferであれば、別途静止画を用意する執拗がなく、再生ボタンは非表示にできること、理解しました。
ツールで実現するなら、Giffferのみなんですね。ありがとうございます！Giffferで作ってみます。
あなたの回答
tips
プレビュー
