- 締切済み
複数画像の読み込みが完了したら、処理をすすめるには？
javascriptにおいて質問です。 いま、imgタグが40個あり、その画像すべての読み込みが 完了したときにメッセージを出したいです。 調べてみると、document.images[i].completeなるもので その画像の読み込みが完了したらtrueを返すものがあるようですので、 それを使って bodyのonLoadイベントにおいてimgタグ分まわして すべて.completeがtrueになるまで次の処理にいかないように したいのですが、どうすればいいのでしょうか？ 画像の中には重いものもあって、forでまわしてもダメのようでした。 再帰処理とか使うのだろうと思うのですがうまくいきません。 すべての読み込みをチェックし、すべて読み込んだらメッセージを 出すロジックを教えてください。
- suucha
- お礼率9% (20/218)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- jqueryで読み込みが終わった画像から処理する
現在、下記のコードで画像を読み込んで処理をしているのですが、 画像の読み込みを待たずに、画像のリサイズ処理が実行されて画像が表示されない 現象に陥りました。 読み込みが終わった画像から処理する方法を ご教授ください。 よろしくお願いいたします。 $.each(json.img,function(){ $('<img/>').attr('src',this).appendTo(images); }); preview.append(images); //この後にリサイズ処理
- ベストアンサー
- AJAX
- <form>タグ内の再読み込みに関して
以下のようなhtmlファイルがあったとします。 ※<body>タグ内以外は省略 ------------------------------------------------- <body onload="bodyload()"> <form> <input id="id_button1" type="image" value="button" name="n_button1" onclick="click();"> </form> </body> ------------------------------------------------- 呼び出されるjavascriptを以下の通りとします ------------------------------------------------- function bodyload() { document.getElementById('id_button1').src = '/images/base.png' } function click() { document.getElementById('id_button1').src = '/images/1.png' } ------------------------------------------------- id_button1のクリックによって、click()が動作し画像が「/images/1.png」に変更されるのですが、 一瞬で「/images/base.png」に戻ってしまいます。色々試したところhtmlファイルの<form>タグを 消してやれば「/images/base.png」に戻ることなく画像を変更することが可能であることに気づき ました。 どうやらformタグがあると再読み込みが行われているようです。 formタグがあると何故このような動きをするのでしょうか？ formタグ内でも再読み込みの有無を 制御することはできないのでしょうか？お分かりになる方がいらっしゃればご教授いただければ と思います。 javascriptというよりhtmlの内容かもしれませんがよろしくお願いいたします。 なお、実行環境はWindows8Pro、VisualStudio2012、Windowsストアアプリ開発プロジェクト内のデバッグです。
- ベストアンサー
- JavaScript
- 読み込み完了後の画像サイズを取得したい
画像ファイルの高さを取得する関数を作成しています。 Imageオブジェクトのheightプロパティの値を取得すればよいだけなの ですが、画像が大きかったりすると読み込み完了前に値を取得してしま うようで、正確な高さが取得できません。 completeプロパティがfalseなら、trueが返ってくるまでheightプロパ ティの値を取得しない・・・といった処理を盛り込んだ関数が作成でき ればと考えていますが、上手く作成できずにいます。 アドバイスをよろしくお願いします。 とりあえず、関数本体はこんな感じにしてます。 function getImgHeight(imgSrc) { objImg = new Image(); objImg.src = imgSrc; //読込み完了ならば高さを取得したい //完了するまで待機できたらよいのだけど・・・ return objImg.height; }
- 締切済み
- JavaScript
- 2箇所の画像をランダムに複数表示
はじめましてjavascript初心者のものです。 2箇所に配置されてる各画像をランダムに表示したく、以下宣言をしてますがどうしても2箇所目が表示されません。お手数ですが、教えてください！ 2箇所目をrandWrite_sとして名前を変更してます。 ▼▼▼▼▼▼▼▼▼▼▼▼meta内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <script type="text/javascript"> <!-- // ランダムに画像を表示する1箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01.gif"></a>', '<a href="#"><img src="/images/ad_banner02.gif"></a>', '<a href="#"><img src="/images/ad_banner03.gif"></a>' ]; function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> <script type="text/javascript"> <!-- // ランダムに画像を表示する2箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01_s.gif"></a>', '<a href="#"><img src="/images/ad_banner02_s.gif"></a>', '<a href="#"><img src="/images/ad_banner03_s.gif"></a>' ]; function randWrite_s() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> ▲▲▲▲▲▲▲▲▲▲▲▲meta内タグ▲▲▲▲▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼▼▼▼▼body内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <p><script type="text/javascript">randWrite();</script></p> <p><script type="text/javascript">randWrite_s();</script></p> ▲▲▲▲▲▲▲▲▲▲▲▲body内タグ▲▲▲▲▲▲▲▲▲▲▲▲
- ベストアンサー
- Java
- 画像の読み込みのチェック
画像を時間ごとに毎回読んでいくのが前提で、 その中で、読み込みが失敗したなら ということをしたいのですが、できるでしょうか？ ... <SCRIPT language="JavaScript"> <!-- var image= new Array(); image[0]='test0.png'; image[1]='test1.png'; image[2]='test2.png'; var ii=0; function imgch(){ idimg.src=image[ii]; // // ここで // 画像の読み込みが失敗しているか？ // もしくは、指定URLが存在しているか？ // を判断したいのですが。 // ii=ii+1; if (ii>2) ii=0; t=setTimeout('imgch()',5000); } <BODY onLoad="imgch()"> <IMG src='test1.png' id="idimg"> ...
- ベストアンサー
- JavaScript
- 複数の画像を先に読み込ませ表示を早くしたいのですが。
はじめまして、Javascriptはほとんどわからないので教えていただけないでしょうか？ WEBサイト制作で、複数の画像を読み込ます事で画像の表示を早くすることができると聞いたのですが調べても思うものを見つけることができませんでした。 ロールオーバー時の画像を先に読み込ませて、Windowsでの砂時計の表示を無くしたいのです。（クライアントからの指示で） <body>タグにonloadを付けることでJavascriptを呼び出す方法らしいのですが詳しいことがわかりません。 Javascriptの記述方法と<body>タグでの呼び出し方を教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- 【jQuery】複数の画像の読み込み完了感知方法
やりたいこと。 すでに表示しているHTML画面上にさらにHTMLタグ（画像を含む）を表示したい。 そのタグにて表示されるべきものがすべて表示されたら、新たに別の関数を実行したい。 ■画像がひとつの場合はこんな感じ？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj.load(function(){ jqObj.prepend(imgObj); $("body").prepend(jqObj); //このへんに描画は終わった状態での処理 }); } ); ■画像が複数ある場合はどう書けばよいでしょうか？ 以下のような書き方であってるのでしょうか？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); var imgObj2 = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj2.attr({ "src":"./f.bmp"}); imgObj.load(function(){ imgObj2.load(function(){ jqObj.prepend(imgObj); jqObj.prepend(imgObj2); $("body").prepend(jqObj); //このへんに描画は終わった状態での処理 }); }); } ); PS そもそもどの時点でブラウザは画像をWEBサーバに要求するのでしょうか？ imgObj.attr({ "src":"./g.bmp"}); の時点でgetの要求出すのでしょうか？
- ベストアンサー
- JavaScript
- 画像の不完全な読み込みについて
ロールオーバー(アウト)で画像切り替えをしています。 ＭacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。 *****外部jsファイル******** if(document.images){ var hoge_over=new Image(70,162); hoge_over.src="./hoge.gif"; var hoge_out=new Image(70,162); hoge_out.src="./hoge2.gif"; } function xOver(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_over.src"); } } function xOut(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_out.src"); } } *****htmlファイル******** <a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self"> <IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a> ************************** 問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。
- 締切済み
- JavaScript
- 交互に入れ替わる画像を複数配置
画像名が変わっても、プログラムは変更しないで、html内のソースの画像名のみを変更するだけでいいようなjavascriptを探していたところ、下記のサイトを発見しました ◆画像を交互に入れ替える (title属性を利用して入れ替える) http://www.openspc2.org/reibun/javascript2/image/change/0002/index.html やりたいことは上記のものでいいのですが、1ページ内に、交互に入れ替わる画像を複数配置する場合は、どのようにしたらいいでしょうか？ 上記のものですと、「photo01」をidに指定した画像１つしか動作しません。 最初にも申しました通り、プログラムは変更したくないので、できれば、1つのIDで画像名を変更するだけにしたいのですが・・・ 以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？ <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon01.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon02.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon03.png"> よろしくお願い致します
- ベストアンサー
- JavaScript
- 別フレームの画像の操作について
画像をクリックすると指定した所にある画像が その画像に変わるというタグを作ったのですが、 １つのフレーム内ではできるのですが ２つのフレームを使って、もう片方にある指定した 画像を変更する事ができなく、色々とサイトを見て みたのですがどうにもうまくいかず、質問させていただきます。 １つ目のフレームののタグは <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbImgSwap(imgName, imgSrc) { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var img = document.images[imgName]; if (!img) img = _HpbImgFind(document, imgName); if (img) img.src = imgSrc; } } } function _HpbImgFind(doc, imgName) { for (var i=0; i < doc.layers.length; i++) { var img = doc.layers[i].document.images[imgName]; if (!img) img = _HpbImgFind(doc.layers[i], imgName); if (img) return img; } return null; } //--> </SCRIPT> 続きは次のレスに（長くてすいません）
- ベストアンサー
- JavaScript
補足
onLoadイベントは、たとえば重い画像が読み込まれた後に 発生するのではありません。 なんというか、HTMLの構成？を読み込んだら発生するのです。