節約生活日記

フリーエンジニアの、仕事&子育て&節約生活などを綴っています!

 TOPへ

節約生活 iPhone/AndroidのブラウザでGIFアニメが動かない

2013.07.12 Friday

スマホ専用サイトを作ってたら衝撃の事実が!

iPhone/AndroidのブラウザでGIFアニメが動かない!

「え?今更?何年開発やってんだ?」って話ですが、GIFアニメってあんまり使わなかったから・・・

調べてみたら、ブラウザによって挙動が違うらしい。ミャア先生のテスト用実機(Android)では、最初の一回は正しく再生される。その後ページをリロードした場合、一番最後のフレームが静止画として表示される。

おそらくブラウザキャッシュのせいだろう。キャッシュをクリアすれば正しく表示されるかどうかは、キャッシュをクリアしたくないので試していないけど、おそらくそんなに頻繁にクリアするユーザーはいないだろう。

スマホのブラウザでGIFアニメは動かないと考えておいたほうが良さそうだ。

では、iPhone/Android向けに、少し動きのある画像を表示するにはどうすば良いか?

まあ、いろいろあるけど、一番手軽なのは「Javascriptのタイマーで切り替える」という方法だろう。

例えばこんな感じ↓


<script type="text/javascript">
<!--
    var sw=1;
    image=new Array(3);
    image[1]=" 画像1のURL ";
    image[2]=" 画像2のURL ";
    image[3]=" 画像3のURL ";

    hyouji();
    function hyouji()
    {
      setTimeout("hyouji()",1000);
      document.war.src=image[sw];
      sw=sw+1
      if (sw>4){sw=1;}
}
//-->
</script>

3枚の画像が一秒ごとに切り替わる。

でも、いちいち「Javascript」ってスマホ面倒くせ〜!!!(━_━)



コメント
コメントする









この記事のトラックバックURL
トラックバック機能は終了しました。
トラックバック

<< HTML5でサイト制作に新たな可能性!目標、PHPをマスター! ←前|次→ページの更新を楽にする2つの方法!(その1) >>


人気の節約コンテンツ by ミャア先生の節約マニュアル
生活の知恵節約生活の知恵!
簡単節約術節約術で節約!!
買い物の節約買い物で節約!!
副収入お手軽副収入!!
節約リフォームリフォームで節約!!
一人暮らし一人暮らしの節約!!
節約グッズグッズで節約!!
水道代の節約水道代の節約術!
電気代の節約電気代の節約術!
ガス代の節約ガス代の節約術!
生活の知恵電話代の節約術!
生活の知恵諸経費の節約術!
生活の知恵食費の節約術!
生活の知恵冷暖房の節約術!
生活の知恵自動車の節約術!
節約生活プロフィール

管理人:ミャア先生

このブログは、節約生活の色々な出来事を日記で紹介するはずでしたが・・・最近は単なる管理人ブログと化しています。タイトルに釣られてやって来た人は、なるべく過去の記事を読んでみてください(笑)たまに真面目な記事も書いてます。




節約生活最近のコメント

節約生活最近のトラックバック