アニメーションGIFをonClickで再生する方法
Animated GIFは、デザインコンセプト（ここではCSSで作成されたポストテキスト効果に対してどのように行ったかの例）を視覚化したり、短いビデオクリップを見せたりするための一般的な方法です。しかし、同じページにそれらが多すぎると、それはあなたのユーザーの焦点を逸脱するでしょう。. たくさんのGIFを紹介するページにとって、これは悪い知らせです。.
ソリューション： 静的な画像をユーザーに提供し、アニメーションGIFをユーザークリックでのみ実行できるようにする. この短いチュートリアルでは、その方法を説明します。.
- デモを見る
- ソースをダウンロード
入門
HTMLファイル、jQuery、そして最後にコードを書くJavaScriptファイルを含むプロジェクトフォルダとファイルの準備から始めましょう。 jQueryをCDNにリンクするか、コピーを入手してプロジェクトディレクトリにリンクすることができます。私はあなたの想像力にスタイルとCSSを任せるでしょう。最も重要な部分は、HTMLマークアップは次のとおりです。
追加に注意してください データ代替 の属性 img 素子。これは、最初に提供した静止画像の代わりに、GIFを保存する場所です。あなたはより多くの画像を追加することができますし、またを通じてそれぞれのためのキャプションを追加する figcaption 素子.
その後、私たちは魔法をもたらすJavaScriptを書きます。アイデアは、ユーザーが画像をクリックしたときにGIF画像を提供することです.
JavaScript
まず、私たちは私たちが入れたGIF画像パスを取得する関数を作成します。 データ代替 属性。各画像をループ処理してjQueryを使用します。 .データ（） その方法：
var getGif = function（）var gif = []; $（ 'img'）。それぞれ（function（）var data = $（this）.data（ 'alt'）; gif.push（data）;）; gifを返します。 var gif = getGif（）;
関数を実行して出力を変数に保存します GIF, 上記のように。の GIF variableはページ内の画像からのGIFのパスを含みます.
画像のプリロード
ロード時に問題が発生しました。まだロードされていないGIFでは、アニメーションGIFがすぐには再生されない可能性があります（ブラウザがGIFを完全にロードするには数秒かかるため）。 GIF画像サイズが大きい場合、この遅れはより顕著に感じられます。.
ページが読み込まれるときに、GIFを事前に読み込むか、同時に読み込む必要があります。.
//すべてのGIFをプリロードします。 var image = []; $ .each（gif、function（index）image [index] = new Image（）; image [index] .src = gif [index];）;
それでは、DevToolsを開き、次に ネットワーク （または リソース） タブ。 GIFファイルはGIFファイルに保存されていますが、すでにロードされています。 データ代替 属性。そして、以下はあなたがそうするために必要なすべてのコードです。.
コードの最後の部分は、それぞれをバインドする場所です。 図 で画像を囲む要素 クリック イベント.
コードは、画像ソースを src 静止画像が提供される属性と データ代替 GIF画像を最初に提供する場所の属性.
ユーザーがもう一度クリックすると、コードは静止画像に戻ります。, “止まる” アニメーション.
$（ 'figure'）。on（ 'クリック'、function（）var $ this = $（this）、$ index = $ this.index（）、$ img = $ this.children（ 'img'）、$ imgSrc = $ img.attr（ 'src'）、$ imgAlt = $ img.attr（ 'data-alt'）、$ imgExt = $ imgAlt.split（ '。'）; if（$ imgExt [1] === 'gif'）$ img.attr（ 'src'、$ img.data（ 'alt'））。attr（ 'data-alt'、$ imgSrc）; else $ img.attr（ 'src'、$ imgAlt）.attr（ 'data-alt'、$ img.data（ 'alt'））;）;
以上です。あなたはスタイルでページを磨くことができます、例えば、あなたはそれがそうであることを示すために画像をオーバーレイする再生ボタンを追加することができます。 “遊べる” またはアニメーションGIF.
デモをチェックして、ここからソースをダウンロードしてください。.
- デモを見る
- ソースをダウンロード
