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

解決済

質問者：rqg2010
質問日時：2006/05/04 19:12
回答数：4件

お世話になります。
関数例えばGetCriteria で、<img src=・・・ onmousedown=・・・
と、いう文字列を１０程取得しました。
そして、onmausedownで、GetCriteria()関数を呼び出し、続けて、innerHTMLでこの文字列から画像をサムネイル画像として表示しました。
ここまでは、できました。

ところが、GetCriteriaを呼び出す
onmausedownの該当の箇所をクリックすると、
あるときは、該当の画像全てが、あるときは、２つと少し、あるときは、４つと少し、
などというように不規則に表示されるようになってしまいました。
この現象は、IE6で発生し、NN7.1では発生しません。

更に、IE6の現象として、以下のようなことも起こります。
このいくつか表示されたサムネール画像をクリックすると、そのサムネール画像の基の大きさの画像を表示するようにしています。サムネール画像自体は上記のとおり表示されていないにもかかわらず、表示されるべき場所をクリックすると、基の画像が表示されます。つまり、イベントが発生します。

メモリ不足のせいかと、IEを起動し直しても駄目です。
よろしくご教示願えないでしょうか。
お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2006/05/04 23:28

画像のプリロードとして以下の書き方だと保持されていないです。

＞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;
}

この回答への補足

やってみました。スクリプトを大きく書き直しました。

>htmlで、
><a href='javascript:void(0)' onMousedown='DspNews()'> ニュース2005/02</a>

のところで、DspNews()を実行すると、つまり、マウスをクリックしたときにDspNews()を実行すると、不規則にサムネール画像が表示されます。

このhtmlの最後で、DspNews()を実行したときは、正常にサムネイル画像は表示されます。

DspNews()の最後の行に
alert("画像読み込みに時間ががかかります。");
などと、すると正常にサムネール画像は表示されます。
また、NN7.1ではalert()が無くても正常に表示されます。

更に、スクリプトを書き直したことにより、表示されるサムネール画像の数が減りました。
以前は、２～５程表示されていましたが、スクリプトを書き直してからは、１～２程となりました。

補足日時：2006/05/05 11:57

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/05/05 04:17

No.4

回答者： BLUEPIXY
回答日時：2006/05/05 13:29

＃３＞スクリプトを書き直してからは、１～２程となりました。

そうですか・・返って悪くなっちゃいましたか・・すみません。
負け惜しみに聞こえるかもしれませんが、ウチでIE6SP2, Firefox1.5.0.2 で試してみたところでは（画像を９コにしても）一応問題なく表示できています。
innerHTML を使わない形式に変えた方がいいのかもしれませんね。
あるいは、innerHTML 後、ID を使って画像をセットするとか。

よろしければ、書き直したソースを補足していただけますか
（直るとは限りませんが）

- 0
- 件

通報する

この回答へのお礼

できた。できました。
BLUEPIXYさん、本当にありがとうございました。

<a href='javascript:void(0)' onMousedown='DspNews()'> ニュース2005/02</a>

DspNews()で、毎回ImgDataArray[x]のデータを読み込んでいたのですが、

<head></head>
で、ImgDataArray[x]のデータを全て読み込み
DspNews(x)と、することにより一瞬に表示が切り替わるようになりました。
一番最初にご指摘されたキャッシュに読み込むという意味が少しわかったような、でも、キャッシュについて調べてみたところ、まだ、まだ、わかっていないような。

NN7.1で、できて、IE6でだめ。とか、innerHTMLで、サムネイルを表示したエリアをリフレッシュするようなことはできないものか。とか、問題は尽きませんが、この先も挑戦します。
今後ともよろしくお願いします。
どうもありがとうございました。

通報する

お礼日時：2006/05/05 13:43

No.2

回答者： BLUEPIXY
回答日時：2006/05/04 21:06

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

この回答への補足

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>

補足日時：2006/05/04 21:19

通報する

- 0
- 件

通報する

No.1

回答者： BLUEPIXY
回答日時：2006/05/04 19:57

キャッシュの関係かも、

画像については、動的に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で表示されることに気がつきました。
だから、どうすれば良いかがわかりません。