• 締切済み

ブラウザに表示されている画像をjavascriptで10秒ごとに更新しているが、途中から画像が表示されなくなる

ブラウザに表示されている画像をjavascriptで10秒ごとに最新画像に更新していますが、途中から画像が表示されなくなってしまいます。 常に最新の画像が見たいので、 キャッシュ画像を見にいって最初に表示した画像がずっと表示されてしまうのを防ぐよう、 下記の様に画像取得時に時間をダミーパラメータとして渡して画像を読み直しています。 document.img.src="images/img.jpg?" + (new Date()).getTime(); これで最初のうちは正常に画像が変わったらブラウザに表示される画像も変わりますが、 時間をダミーパラメータで渡しているのでキャッシュ画像がどんどんできていくきます。 これが原因なのか、しばらくすると画像が表示されなくなってしまいます。 この現象はIE8で発生しており、FireFoxでは発生していません。 解決方法、アイデアを教えていただけますようお願いします。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

<meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" />

hunya0216
質問者

お礼

ご回答ありがとうございます。 返事が遅くなってしまい申し訳ありません。 教えていただいたメタタグを書いても画像ファイルに対しては有効ではないようで、キャッシュ画像を見てしまうようでした。 IE8でのみ発生しているようなので、確証はありませんが IE8のバグなのかも知れません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptで画像を表示する

    javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。

  • javaScriptでリンク画像のランダム更新表示

    画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> <!--　var imgURL = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'">'); // --></script> </body> </html>

  • JavaScript表示させる画像へリンクの貼り方

    初めて質問させていただきます。 JavaScript で、表示させた画像へのリンクの張り方を 教えていただきたいのです。 JavaScript のデータは、外部リンクになっています。 いろいろと見て回ったのですが、JavaScript に関しての知識不足で、 おそらく、調べきれていないのでは・・・とも思うのですが、 急ぎでどうしても必要ですので、教えていただきたいです。 よろしくお願いいたします。 // JavaScript Document //----開始日 YYYY/M/D 形式 半角数字で開始日指定 myStartDate="2012/9/14 16:29:00"; //　終了日 YYYY/M/D 形式 半角数字で終了日指定 myEndDate="2012/9/14 17:50:00"; //表示するHTML myHTML=("<img src='●●.jpg'>");　　←この画像にURLを付けたいです。 /******************************************************************/ myDate=new Date(); //現在の日付取得 mySD=new Date(myStartDate); myED=new Date(myEndDate); if(myDate.getTime()-mySD.getTime()> 0 && myED.getTime()-myDate.getTime()> 0){ document.write(myHTML); } ーーーーーーーーーーーーーーー <body> <div id="●●"> <script type="text/javascript" src="js/pr.js"></script> </div> </body>

  • firefoxで表示される画像がIEで表示されない

    同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptで画像を変更する

    質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。

  • JavaScriptでの画像ロールオーバーについて教えて下さい。

    非常に初歩的な事で申し訳ありません。 サイトのメニュー部分の画像をJavaScriptでマウスオーバー時に切替たいのですが、うまくいきません。 IE6とOpera9ではすべて表示できたのですが、Firefox1.5では一部の画像だけ切り替えられませんでした。 原因が分からず困っています。 function chImg(img, str){ document.images[img].src = str;} よろしくお願いします。

  • javascript/画像複数表示について

    初めまして。 javascriptは何も知らないのですが、 業務で必要となり、困っております。 どなたかご教示下さい。 ■動かない 下記※の記述をしたのですが、 一つだけだと動くのですが、複数同じものを何個もhtml内に記述すると、 動作しません。 察するにファイル名等の指定が必要なのかな… なんて思うのですが、その方法がわかりません。 WEBサイト内でサムネイルをクリックすると、 大きな画像が選定するファイル毎に切り替えるスクリプトです。 ■現状の記述内容 <html> <head> <title></title> <script type="text/javascript"> <!-- function Imgche(ado) { document.space.src=ado; } // --> </script> </head> <body> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> </body> </html>

  • こんにちは、javascriptにてボタンを押すと画像が透明度が下がる

    こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。 ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を 元の透明度にフェードインすることが出来ません。 if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。 forで回してカウントから取得してみようかと,すべての画像に<p class＝"fade1">のような タグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が $(".fade+i img")等と指定してみましたが、動きませんでした。 適切な方法がありましたら、教えてください。よろしくお願いします。 【html】 <div class="thumbnail"> <img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" /> </div> 【javascript】 $(document).ready( function(){ $(".thumbnail img").click(function(){ if($(".thumbnail img").css("opacity")!=1.0){ $(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする } $(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする }); });

  • javascriptを使って画像を切り替える

    javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒　 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　 　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。

  • 画像クリックで画像変化を1ページに複数表示

    どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。 changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。 それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか？ ４つ画像を用意して、２つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。 今はこんな感じの記述ができています。 <SCRIPT type="text/javascript"> function changeImage() { var imgname = document.images[0].name; if(imgname == "01"){ document.images[0].src = "02.gif"; document.images[0].name = "02"; } else { document.images[0].src = "01.gif"; document.images[0].name = "01"; } } </SCRIPT> </head> <body> <a href="JavaScript:changeImage()"> <img src="01.gif" name"01" border=0></a>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する