innerHTMLで一部のみが表示される現象の解決方法

前へ 次へ
このQ&Aのポイント
  • 関数GetCriteriaを使用して、特定の文字列からサムネイル画像を表示する際に、IE6で一部のみが表示される現象が起こることがあります。
  • この問題はIE6のメモリ不足の可能性もありますが、再起動しても解決しないことがあります。
  • この問題はNN7.1では発生しないことが確認されています。イベントが発生していることから、おそらく要素の取得に関する問題が考えられます。
回答を見る
  • ベストアンサー

innerHTMLで、表示すると、一部しか表示されないときがある。

お世話になります。 関数例えばGetCriteria で、<img src=・・・ onmousedown=・・・ と、いう文字列を１０程取得しました。 そして、onmausedownで、GetCriteria()関数を呼び出し、続けて、innerHTMLでこの文字列から画像をサムネイル画像として表示しました。 ここまでは、できました。 ところが、GetCriteriaを呼び出す onmausedownの該当の箇所をクリックすると、 あるときは、該当の画像全てが、あるときは、２つと少し、あるときは、４つと少し、 などというように不規則に表示されるようになってしまいました。 この現象は、IE6で発生し、NN7.1では発生しません。 更に、IE6の現象として、以下のようなことも起こります。 このいくつか表示されたサムネール画像をクリックすると、そのサムネール画像の基の大きさの画像を表示するようにしています。サムネール画像自体は上記のとおり表示されていないにもかかわらず、表示されるべき場所をクリックすると、基の画像が表示されます。つまり、イベントが発生します。 メモリ不足のせいかと、IEを起動し直しても駄目です。 よろしくご教示願えないでしょうか。 お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

画像のプリロードとして以下の書き方だと保持されていないです。 ＞for (x=0; x < (ImgDataArray[ArryNo].length)/fielLength; x++){ ＞DataNo = fielLength * x ; ＞var myimage=new Image(); ＞myimage.src=ImgDataArray[ArryNo][DataNo]; ＞} 以下の書き方では、src として適当ではありません。 ＞rtnCreteria += ' border="0" src=" ' ＞rtnCreteria += myimage +'" ' (修正箇所を指摘するより、書いた方が早いような気がするので、) 以下修正したものを挙げます。 (書き方を少しオリジナルから修正していますが、それは、本質的な間違いだというものではありません、単に私の趣味です。 ID にファイル名がそのまま使えるかどうかはちょっと自信がなかったので、別に振ってあります） //-------------------------------------------------------------- //----------- //データ定義 //----------- function ThumNail(id, file, comment, etc1, etc2){ var image = new Image(); image.src = file; this.id = id; this.image = image; this.comment = comment; this.etc1 = etc1; this.etc2 = etc2; } var ImgDataArray = new Array(); ImgDataArray[0]=new Array( new ThumNail('IMG1','img/01.jpg','P1','',''), new ThumNail('IMG2','img/02.jpg','P2','',''), new ThumNail('IMG3','img/03.jpg','P3','','') ); //-------------------------------------------- //サムネイルを表示するタグ文字列を取得する関数 //-------------------------------------------- function DspThumNailCretera(ArryNo,TDWidth,TDHeight){ var thumArray = ImgDataArray[ArryNo]; var arraySize = thumArray.length; var rtnCreteria=''; rtnCreteria += '<TABLE style="font-size:13px;text-align:center;"><TR>'; for(var x=0; x < arraySize ; x++){ rtnCreteria += '<td style="vertical-align:top;' + 'width:' + TDWidth+ ';' + 'height:' + TDHeight + ';' + '">'; //画像表示 rtnCreteria += '<a href="javascript:void(0)" ' + 'onMousedown' + '="SetCrntX(' + ArryNo + ',' + x +')">' + '<img ' + 'id="' + thumArray[x].id + '" ' + 'border="0" ' + 'src="' + thumArray[x].image.src +'" ' + 'width="' + (TDWidth - 5) + '"' + '>' ; //一行コメントの表示 rtnCreteria += '<BR>'+ thumArray[x].comment + '</a>' + '</TD>' ; } rtnCreteria += '</TR></TABLE>'; return rtnCreteria; } //------------------------------ //ニュースをブラウジングする関数 //------------------------------ function DspNews(){ var imgObj=document.getElementById("NewsAreaID") //サムネイルを表示するタグ文字列を取得 var GetCriteria=DspThumNailCretera(0,60,80); // alert(GetCriteria); imgObj.innerHTML=GetCriteria; }

rqg2010
質問者

お礼

BLUEPIXYさん、早速ありがとうございます。 thisの使い方もまだまだ、良くわからない初心者です。示していただいたソースを基に、今から勉強し直します。時間がかかりそうです。後ほど結果を報告させていただきます。

rqg2010
質問者

補足

やってみました。スクリプトを大きく書き直しました。 >htmlで、 ><a href='javascript:void(0)' onMousedown='DspNews()'> ニュース2005/02</a> のところで、DspNews()を実行すると、つまり、マウスをクリックしたときにDspNews()を実行すると、不規則にサムネール画像が表示されます。 このhtmlの最後で、DspNews()を実行したときは、正常にサムネイル画像は表示されます。 DspNews()の最後の行に alert("画像読み込みに時間ががかかります。"); などと、すると正常にサムネール画像は表示されます。 また、NN7.1ではalert()が無くても正常に表示されます。 更に、スクリプトを書き直したことにより、表示されるサムネール画像の数が減りました。 以前は、２～５程表示されていましたが、スクリプトを書き直してからは、１～２程となりました。

その他の回答 (3)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

＃３＞スクリプトを書き直してからは、１～２程となりました。 そうですか・・返って悪くなっちゃいましたか・・すみません。 負け惜しみに聞こえるかもしれませんが、ウチでIE6SP2, Firefox1.5.0.2 で試してみたところでは（画像を９コにしても）一応問題なく表示できています。 innerHTML を使わない形式に変えた方がいいのかもしれませんね。 あるいは、innerHTML 後、ID を使って画像をセットするとか。 よろしければ、書き直したソースを補足していただけますか （直るとは限りませんが）

rqg2010
質問者

お礼

できた。できました。 BLUEPIXYさん、本当にありがとうございました。 <a href='javascript:void(0)' onMousedown='DspNews()'> ニュース2005/02</a> DspNews()で、毎回ImgDataArray[x]のデータを読み込んでいたのですが、 <head></head> で、ImgDataArray[x]のデータを全て読み込み DspNews(x)と、することにより一瞬に表示が切り替わるようになりました。 一番最初にご指摘されたキャッシュに読み込むという意味が少しわかったような、でも、キャッシュについて調べてみたところ、まだ、まだ、わかっていないような。 NN7.1で、できて、IE6でだめ。とか、innerHTMLで、サムネイルを表示したエリアをリフレッシュするようなことはできないものか。とか、問題は尽きませんが、この先も挑戦します。 今後ともよろしくお願いします。 どうもありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

現状どういう風にやっているか、ソースともども補足していただけますか？

rqg2010
質問者

補足

BLUEPIXYさん、レスありがとうございます。 遠慮無く書かせていただきます。 よろしくお願いします。 //************************ //データ定義 //１レコード４フィールド //************************ var ImgDataArray = new Object(); fielLength=4; ImgDataArray[0]=new Array( 'news01.jpg','P1','','', 'news02.jpg','P2','','', ・・・・・・・・・・・・ 'news10.jpg','P10','','', ); //*********************** //サムネイルを表示するタグ文字列を取得する関数 //*********************** function DspThumNailCretera(ArryNo,TDWidth,TDHeight){ var DataNo=0; //データの通し番号 for (x=0; x < (ImgDataArray[ArryNo].length)/fielLength; x++){ DataNo = fielLength * x ; var myimage=new Image(); myimage.src=ImgDataArray[ArryNo][DataNo]; } var rtnCreteria='' rtnCreteria += '<TABLE style="font-size:13px;text-align:center;"><TR>' var DataNo=0;//データの通し番号 for (x=0; x < (ImgDataArray[ArryNo].length)/fielLength; x++){ rtnCreteria += '<td style="vertical-align:top;' rtnCreteria += 'width:'+TDWidth+';' rtnCreteria += 'height:'+TDHeight+';' rtnCreteria += '">' DataNo = fielLength * x ; //画像表示 rtnCreteria += '<a href="javascript:void(0)" ' rtnCreteria += 'onMousedown' rtnCreteria += '="SetCrntX('+ArryNo+',' + x +')">' rtnCreteria += '<img ' rtnCreteria += 'id="' + ImgParmArray[ArryNo][0] + x + '" ' rtnCreteria += ' border="0" src=" ' rtnCreteria += myimage +'" ' rtnCreteria += 'width="'+ (TDWidth-5) +'"' rtnCreteria += '>' //一行コメントの表示 rtnCreteria += '<BR>'+ ImgDataArray[ArryNo][DataNo+1] rtnCreteria += '</a>' rtnCreteria += '</TD>' } rtnCreteria += '</TR></TABLE>' return rtnCreteria; } //*********************** //ニュースをブラウジングする関数 //*********************** function DspNews(){ imgObj=document.getElementById("NewsAreaID") //サムネイルを表示するタグ文字列を取得 var GetCriteria=DspThumNailCretera(0,60,80); //alert(GetCriteria);　//これを実行すると正常 imgObj.innerHTML=GetCriteria htmlで、 <a href='javascript:void(0)' onMousedown='DspNews()'> ニュース2005/02</a><BR> <div id="NewsAreaID"> </div>

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

キャッシュの関係かも、 画像については、動的にsrc で表示させようとするより image オブジェクトであらかじめ取り込んでおいてそれを表示するようにした方がいいと思う。

rqg2010
質問者

補足

BLUEPIXYさん、早速レスありがとうございます。 タグ文字列を取得する関数 GetCriteria()に、タグ文字列を取得する前に、 つまり、この関数の最初に var myimage=new Image(); for (x=0; x < (ImgDataArray.length; x++){ myimage[x]=ImgDataArray[x]; } を、付け加えて、 ImgDataArray[x] を直接表示するのでなく myimage[x] を表示するようになおしました。 改善されませんでした。 ImgDataArray[x]に表示させたい画像のファイル名を書いています。 だから、src=ImgDataArray[x]・・・ とする前に 一端myimage[x]に読み込ませたつもりですが、 >動的にsrc で表示させようとするより >image オブジェクトであらかじめ取り込んでおいて >それを表示するようにした方がいいと思う。 の、所の意味が今一わからなくて、やっています。 だから、これでは、おっしゃる意味と異なったことをやっているかもしれません。 また、 innerHTMLを用いて、GetCriteria()で取得した文字列をIE6で表示させる前にalert()で、取得した文字列を表示させてから、innerHTMLを用いて表示させると、全ての画像がIE6で表示されることに気がつきました。 だから、どうすれば良いかがわかりません。

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

関連するQ&A

  • innerHTMLを使わずに…

    初めまして。 よく、リンクに触れると、下に説明文が表示される…というようなサイトがありますよね。 それの応用で、innerHTMLを使わずに以下のような物を作りたいのですが、お力を貸してくださいm(_ _)m ボタンAとボタンBがあって、ボタンAをクリックすると画像Aを表示。 ボタンBをクリックすると画像Aから画像Bに表示が切り替わる。 その表示した画像に個別のリンクを貼る。 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ａアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクＡ><IMG src=画像Ａアドレス></a>'">ボタンＡ</A></td> <td rowspan="2"><font id="img"></font></td> </tr> <tr> <td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ｂアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクＢ><IMG src=画像Ｂアドレス></a>'">ボタンＢ</A></td> </tr> </table> という物を作りたいのですが、innerHTMLは対応していないブラウザが多いので、使用したくないのです。 JavaScript、CSSはOKです！ よろしくおねがいします。

    • ベストアンサー
    • HTML
  • innerHTMLで画面更新後、初期画面に戻ってしまう。

    javascript初心者です。 　１つのHTMLファイル内で、TABLE内のあるセルに対して、ボタンクリック時に単なるセルの値を<INPUT>タイプに変更する関数をinnerHTMLを使用して作成しました。 　ところが実行すると一時的には更新され、表の中に<INPUT>フォームが表示されるのですが、関数を抜けると画面が再描画されて、初期表示状態に戻ってしまいます。 　おかしな事は、その関数のすぐ下は</SCRIPT>でscriptの記述は終わりなのですが、関数の最後の締めくくり文字"}"と"</SCRIPT>"間にalertを記述すると、関数を抜けたあと、このalertが実行されます。そのまま下に流れてHTMLが実行されているようにも見えます。 　環境はIE6.0(W2K)ですが、IE5.5(NT4.0&W2K)でも現象は一緒でした。 　frameを使用して3ファイル（フレームファイルと上下のHTML）に分割して自分以外のhtmlをinnerHTMLで更新したことはあるのですが、この方法しかないでしょうか。 　画面再描画を停止するMETAタグとか見当たらないようですが、ご存知でしたら教えて下さい。 よろしくお願いします。

  • innerHTMLで、関数での記載内容を希望のエリアに表示したい。

    お世話になります。 下記のように行うと、 「実際は、いろいろと表示したい」 が、 「aaaaaaaaaaaaaaaaaa」 の下に表示されてしまいます。 また、 <div id="DspArea"> の位置には、undefined と、表示されてしまいます。 document.getElementById("DspArea").innerHTML="tst"; とすれば、 <div id="DspArea"> の位置に正確に表示されます。 innerHTMLで、関数で記載したタグを含む文字列を表示させるには何か気をつけなければならないことがあるのでしょうか。 よろしくご教示お願いします。 <script type="text/javascript"><!-- function dspTst(){ document.write('実際は、いろいろと表示したい'); } // --> </script> <div> <div id="DspArea"> </div> <div> aaaaaaaaaaaaaaaaaaaa </div> </div> <script type="text/javascript"><!-- document.getElementById("DspArea").innerHTML=dspTst(); // --> </script>

  • innerhtmlへのリンク書き込み

    現在、VBScriptでホームページ上のデータを拾い、ieのオブジェクトで拾ったデータを表示 しようとしています。 　（表示するデータは、コピー／ペーストできるようにしたい。） このとき、データ取得元ホームページのリンクも表示したいのですが、<a href>タグでリンク先を 指定しinnerhtmlに書き込んでも、表示はできているのですが、マウスでクリックしてもリンク先の ホームページが開きません。 innerhtmlへのリンク書き込みは無効になるのでしょうか？ なにかいい方法をご存知であれば、ご教示願えないでしょうか？

    • ベストアンサー
    • HTML
  • firefoxでの画像表示について

    ヤフオクを見てると 加工された画像もしくは横幅が大きいサムネイル画像のものが 表示されてません。バージョンは2.0です。 この現象は1ヶ月ぐらい前からおきはじめました。 IEでは見れます。よろしくお願いします。

  • リロードせずにHTMLタグ出力（innerHTML以外の方法で）

    初めまして。 下記の条件で、HTMLをリロードせずにHTMLタグを出力する方法をご存知の方がいらっしゃれば、教えていただけないでしょうか。簡単に言うと、innerHTMLのようにHTMLをリロードせずに動的に出力する方法が知りたいのです。（innerHTMLはこちらの事情で使えません） ・IE6限定でよい ・JavaScript,CSS,DOMはOK ・DynamicHTMLはNG（innerHTML等） ・一度HTMLを読み込んだ後、動的にHTMLタグを出力する ・出力する文字列の中にタグがあり、これが有効になるようにしたい （例：たとえば、動的にHTNLタグである<b>hogehoge</b>とかを出力して、ブラウザ上にはhogehogeという文字列が太文字で表示されるようにしたいのです） ※試してみたがだめだった方法 １．document.write()による出力 ⇒これをするとページがリロードされてしまうので条件にあわず ２．getElementById('hoge')で、<div id='hoge'>&nbsp;</div>のnodeValueに文字列を代入して出力 ⇒これをしても、HTMLタグではなく文字列としてHTMLタグが出力される。 よろしくお願いします！

  • Firefox のWEB表示が一部おかしくなります

    ヤフオクの検索一覧を表示しますといつも画像のように２つ目 だけ画像のようにノイズが入ります。ヤフオクだけです。 ここのノイズ表示の部分はクリックできません。 不足情報は指示していただければ追記します。よろしくお願い します。 Win7 G570 使用です。Firefox 29.0 です。 ＩＥでは正常表示 Firefox 29.0 上書き再インストールでも同現象 セーフモードでも同現象です。

  • 一部のHPが表示されません。

    いつからか一部のお気に入りに入れてたURLをクリックしても画像も文字も表示されなくなりました。 例えば、AkibaPCホットラインをクリックして、タブには表示されていますが、 画面には何も出ません。 同じ現象は、ふくびき。COMでも起きています。 OS　Win7　Home　64bit Internet　Exploert9 ウィルスソフト　ノートンインターネットセキュリティ 対処法はありますか？

  • innerHTMLなどの反映タイミング

    innerHTMLやinnerTextでの反映タイミングについて教えてください。 JavaScriptでsleep関数の自作テストを行なっている過程で innerHTMLやinnerTextが即時には反映されない現象に直面しました。 コードを貼り付けておきます。 ※htmlとしてIE等のブラウザで動かしてもいいですが、 htaとして実行したほうが簡易で軽くていいと思います。 このコードでは (1)innerHTML(かinnerText)で「実行中…」を表示 (2)sleep関数を呼ぶ (3)innerHTML(かinnerText)で「終了」を表示 という、(少なくとも表示部分に関しては) 極めて単純な処理をしています。しかし(1)が反映されません…。 (1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。 よく他言語・フレームワークではflushとかリアルタイム描画等の コマンドやオプションで対処できるので、JavaScript(JScript)でも ないものかなぁと思い質問してみることにしました。 質問は以下です ・この現象はなぜ起こるのか。原因説明 ・これを回避する方法はあるかないか ・あるのならその方法 明示的なコマンド・オプションでも対症療法でもかまいません。 環境はとりあえずはWinXP・hta(レンダリングエンジン：IE8)で動けばOKです。 よろしくお願いします。 <html> <body> <div id="status">sleepテスト</div> <input type="button" onclick="testAjaxSleep()" value="testAjaxSleep"><br> <input type="button" onclick="testBusySleep()" value="testBusySleep"><br> <br> <script> var waittime = 3; function testAjaxSleep() { document.getElementById("status").innerHTML = "「AjaxSleep」実行中…"; ajaxSleep(waittime); document.getElementById("status").innerHTML = "AjaxSleep終了"; } function testBusySleep() { document.getElementById("status").innerText = "「BusySleep」実行中…"; document.close(); busySleep(waittime); document.getElementById("status").innerText = "BusySleep終了"; } function ajaxSleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); var url = "http://www.google.com/?dummy"; var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); while (stopTime > (new Date()).getTime()) { xmlHttp.open('GET', url, false); xmlHttp.send(null); } } function busySleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); while (stopTime > (new Date()).getTime()) {} } </script> </body> </html>

  • ユーチューブのサムネイルが薄くなって再生表示が出る

    ユーチューブのマイチャンネルに表示されるいくつかのサムネイルの左上に「再生済み」と表示され、さらに画像が薄くなっている現象が最近起きました。 サムネイルをクリックすると正常が動画が再生されます。 再生済みの表示がないサムネイルの画面はクリアで正常です。 再生済の表示を消す方法をお教え下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する