いつもお世話になっております。
タイトルの通りで、HTMLとJS処理は以下のようにしています。(かなり簡略化しているので構文ミスはご容赦ください)
HTML
1<html> 2<head> 3<script src="js/api/question.js" type="text/javascript"></script> 4</head> 5 6<body> 7<img src='常に表示する画像1.png' class='image'/> 8<img src='常に表示する画像2.png' class='image'/> 9 10<div id='kakikae1' /> 11<div id='kakikae2' /> 12</body> 13</html>
JavaScript
1question.js 2 3window.onload = function() { 4 var img = "<img src='後から表示する画像.png' class='image'/>"; 5 var text = "書き換え"; 6 7 $("#kakikae1").html(img); 8 $("#kakikae2").html(text); 9}
とした場合に"後から表示する画像.png"が表示されず、"常に表示する画像"とtextだけ表示されてしまいます。
時々問題なく表示されたりもします。
また、更新ボタンを何度か押したり、ウィンドウサイズを変更すると再読込が入って表示されるようになります。
DOMを書き換えたあとにimgタグを全て参照して、load後にtextを読ませるようにしたら表示されるかと思ったのですが、挙動しては何も変わらずでした。
JavaScript
1$("#kakikae1").html(img); 2$('img').bind('load', function() { 3 console.log("COUNT"); 4 $("#kakikae2").html(text); 5}
console.logには、
表示されるときは3回(DOMで書き換えたIMGの個数分が加算されていると推測しています)
表示されない時は2回ログが出てきます。
imgもDOM書き換えで設定しなければならないのですが、
こちらをうまく表示させるためにはどのような処理を行えばよいでしょうか?
ご教示お願い致します。
回答2件
あなたの回答
tips
プレビュー