- ベストアンサー
複数画像を最初に読み込んでそれを切り替える方法
- IEの全画面表示で表示する際、画像の読み込みの為にメニューが出てしまう問題があります。解決方法として、最初に全ての画像を読み込んでから切り替える方法があります。
- 以下のソースコードは、HTML＋JavaScript＋CSSを使用して披露宴のスタッフロールを作成する際に、最初に画像を全て読み込んでから切り替える方法を示しています。
- 具体的なソースコードとして、画像を配列に格納し、タイマーを使用して一定時間ごとに画像を切り替える方法が記述されています。
- shuhei1031
- お礼率36% (15/41)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
画像の読み込み終了を判定していないわね。 画像が一時領域にあると Imageのcompleteプロパティがtrueになるわ。 あと setAttribute("background", pict[count]) は setAttribute("background", pict[count].src) にしないと画像が背景に反映されないわよ。
その他の回答 (2)
- askaaska
- ベストアンサー率35% (1455/4149)
Win2000+IE6なんて環境は持っていないけど 察するにループの処理が重すぎて さくっとフルスクリーンにならないだけだと思うわ。 ループにインターバルを持たせるとか keyイベントを受けてループを一時停止するとか 上手くいくかわからないけどcompleteの変わりにonloadを試してみるとか してはどお？。
お礼
WindowsXP＋IE6でも同じでした。 フルスクリーンになった後、画像が分かるタイミングの度に メニューバーみたいなのがぴろっとでてきます。 ただ、FireFoxでやってみたらでなかったので、 そっちで行うことにしました。 連絡が遅れてすいませんでした。 ありがとうござました。
- askaaska
- ベストアンサー率35% (1455/4149)
> // この画像はBODYの部分にも指定し、JavaScriptからは表示されない この文言の意味がわからないのでとりあえず気にしないことにして JavaScriptにはImageというオブジェクトがあるの。 こいつに画像を格納できるわ。 配列pictは文字列の配列じゃなくて Imageの配列にしてあげればいいのよ。 srcを指定すると読み込み始めるわ。
補足
以下のようにやったのですが、やっぱり読み込みにいってしまいます。 画像を変更する変更がいけないのだと思いますが、 どのようにすればいいのでしょうか？ <HTML> <HEAD> <TITLE>test</TITLE> <style type="text/css"> </style> <script language="JavaScript"> <!-- var TIMER="10000"; //スライド切替時間(1秒=1000) var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1) var count="0"; //表示画像のカウント var pict_num = 3; //画像の数 var pict = new Array(pict_num); //画像オブジェクトのポインタ配列 var pict_src = new Array(pict_num); //画像のパスの配列 pict_src[0] = "./SunSet.jpg"; //この画像は初期画像なのでHTMLのBODY部分で表示させる pict_src[1] = "./Winter.jpg"; pict_src[2] = "./BlueHills.jpg"; for(i=0; i<pict_num; i++){ pict[i] = new Image(); pict[i].src = pict_src[i]; } function TimerStart(){ if(TIMER_ID == -1){ TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行 } } function ChangeImg(){ count++; count %= 3; // document.body.style.backgroundImage="url(" + pict[count] + ")"; //bodyの背景画像変更 // document.body.style.backgroundImage="url(" + pict[count].src + ")"; //bodyの背景画像変更 document.getElementById("body_id").setAttribute("background", pict[count]); //bodyの背景画像変更 } //--> </script> </HEAD> <BODY id="body_id" onload= "TimerStart()" BACKGROUND="./SunSet.jpg" style="background-color:#000000;color:#ffffff;overflow:hidden;background-repeat: no-repeat;background-position: 50% 50%;"> <FONT SIZE=+2> <MARQUEE DIRECTION="UP" LOOP="1" SCROLLAMOUNT="3" height="100%"> 山田太郎<BR> 小泉純一郎<BR> 小泉今日子<BR> </MARQUEE> </BODY> </HTML>
補足
素早い回答ありがとうございます。 最終的に以下のようになりましたが、 F11で画面を最大化した場合で、かつ、画像が切り替わる瞬間、 右上にメニューが出てしまいます。 画像を読み込んでいるから出るわけではなく、JavaScriptが動いてるか、 または、スタイルシートの背景画像を入れ替えたから出ていると思います。 なんとかする方法はないでしょうか？windows2000とIE6です。 <HTML> <HEAD> <TITLE>test</TITLE> <style type="text/css"> </style> <script language="JavaScript"> <!-- var TIMER="10000"; //スライド切替時間(1秒=1000) var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1) var count="0"; //表示画像のカウント var pict_num = 3; //画像の数 var pict = new Array(pict_num); //画像オブジェクトのポインタ配列 var pict_src = new Array(pict_num); //画像のパスの配列 pict_src[0] = "./SunSet.jpg"; //この画像は初期画像なのでHTMLのBODY部分で表示させる pict_src[1] = "./Winter.jpg"; pict_src[2] = "./BlueHills.jpg"; for(i=0; i<pict_num; i++){ pict[i] = new Image(); pict[i].src = pict_src[i]; // 受信待ちループ wk = 1; while(1){ //ダウンロードが終わったらループを抜ける if(pict[i].complete == true){ break; } //一応、無限ループ対策 if(wk > 30000){ break; } wk++; } } function TimerStart(){ if(TIMER_ID == -1){ TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行 } } function ChangeImg(){ count++; count %= 3; // document.body.style.backgroundImage="url(" + pict[count] + ")"; //bodyの背景画像変更 // document.body.style.backgroundImage="url(" + pict[count].src + ")"; //bodyの背景画像変更 document.getElementById("body_id").setAttribute("background", pict[count].src); //bodyの背景画像変更 } //--> </script> </HEAD> <BODY id="body_id" onload= "TimerStart()" BACKGROUND="./SunSet.jpg" style="background-color:#000000;color:#ffffff;overflow:hidden;background-repeat: no-repeat;background-position: 50% 50%;"> <FONT SIZE=+2> <MARQUEE DIRECTION="UP" LOOP="1" SCROLLAMOUNT="3" height="100%"> 山田太郎<BR> 田中花子<BR> 愛井上男<BR> </MARQUEE> </BODY> </HTML>