- ベストアンサー
innerHTMLで一部のみが表示される現象の解決方法
- 関数GetCriteriaを使用して、特定の文字列からサムネイル画像を表示する際に、IE6で一部のみが表示される現象が起こることがあります。
- この問題はIE6のメモリ不足の可能性もありますが、再起動しても解決しないことがあります。
- この問題はNN7.1では発生しないことが確認されています。イベントが発生していることから、おそらく要素の取得に関する問題が考えられます。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
画像のプリロードとして以下の書き方だと保持されていないです。 ＞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; }
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＃３＞スクリプトを書き直してからは、１～２程となりました。 そうですか・・返って悪くなっちゃいましたか・・すみません。 負け惜しみに聞こえるかもしれませんが、ウチでIE6SP2, Firefox1.5.0.2 で試してみたところでは（画像を９コにしても）一応問題なく表示できています。 innerHTML を使わない形式に変えた方がいいのかもしれませんね。 あるいは、innerHTML 後、ID を使って画像をセットするとか。 よろしければ、書き直したソースを補足していただけますか （直るとは限りませんが）
お礼
できた。できました。 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)
現状どういう風にやっているか、ソースともども補足していただけますか？
補足
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)
キャッシュの関係かも、 画像については、動的にsrc で表示させようとするより image オブジェクトであらかじめ取り込んでおいてそれを表示するようにした方がいいと思う。
補足
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で表示されることに気がつきました。 だから、どうすれば良いかがわかりません。
お礼
BLUEPIXYさん、早速ありがとうございます。 thisの使い方もまだまだ、良くわからない初心者です。示していただいたソースを基に、今から勉強し直します。時間がかかりそうです。後ほど結果を報告させていただきます。
補足
やってみました。スクリプトを大きく書き直しました。 >htmlで、 ><a href='javascript:void(0)' onMousedown='DspNews()'> ニュース2005/02</a> のところで、DspNews()を実行すると、つまり、マウスをクリックしたときにDspNews()を実行すると、不規則にサムネール画像が表示されます。 このhtmlの最後で、DspNews()を実行したときは、正常にサムネイル画像は表示されます。 DspNews()の最後の行に alert("画像読み込みに時間ががかかります。"); などと、すると正常にサムネール画像は表示されます。 また、NN7.1ではalert()が無くても正常に表示されます。 更に、スクリプトを書き直したことにより、表示されるサムネール画像の数が減りました。 以前は、２～５程表示されていましたが、スクリプトを書き直してからは、１～２程となりました。