私はいくつかのイライラする JavaScript のタイミングの問題を抱えています。
参考までに、このページはjspファイルであり、このページに添付されているのは別のjsファイルとjQuery CDNファイルです。トラブルシューティングの目的で、不要なコンテンツとコードをすべて削除し、必要なものを個別の jsp ファイルと js ファイルに貼り付けて、この特定の問題をトラブルシューティングしました。
html と js をどこかに表示できれば、それは素晴らしいことです。ですが、とりあえず説明します。このページには 2 つのボタンがあり、1 つは画像をロードするためのもので、もう 1 つは「ズーム」機能を切り替えるためのものです (詳細は後述)。ユーザーがボタンをクリックすると、DOM、具体的には innerHTML を使用して画像が読み込まれます。この画像は、水平スクロール バーと垂直スクロール バーに囲まれています。ユーザーが「ズーム」機能をオンにすると、画像は onclick イベントでマウスのクリック位置を記録します。したがって、これをオンにすると、ユーザーが画像をクリックすると、DOM と innerHTML を使用して、同じ画像のより大きなバージョンが読み込まれます。最後のステップ、最も重要なステップでは、マウスの位置を使用して、スクロールバーがフォーカスされ、クリックされたポイントが中央に配置されます (scrollLeft と scrollTop を使用)。
これはすべてIEで問題なく機能します。ただし、非 IE ブラウザー (つまり、FireFox) では、スクロール調整が innerHTML に追いつくまでに数回クリックする必要があります。つまり、ユーザーが初めて「ズーム」すると、画像はロードされますが、スクロールバーは調整されません。IE と同じように動作するには、さらに 2 回連続してクリックする必要があります。私は innerHTML を研究していましたが、FireFox では IE よりも遅いです。
どうすればこれを修正できますか? JavaScript を使用して FireFox に画像をロードし、すぐに画像のスクロール位置を調整しようとした人はいますか? 繰り返しますが、IEでは最初とその後は毎回機能します。しかし、IE 以外のブラウザには問題があります。
innerHTML、replaceChild、appendChild を使用してみましたが、これまで試したことはありません。
ありがとうございました。
更新:この問題がスクロールバー内にあるのか、画像だけなのかを確認したかったのです。そのため、画像を < p > ... < p > に置き換え、ユーザーが開始した onclick イベントを介して **最初の* 画像が読み込まれた直後にスクロールするようにプログラムしました。興味深いことに、それはうまくいきました。次に、テキストを画像に置き換えましたが、再び壊れました。
そのため、DOM (つまり、innerHTML) を使用して画像が読み込まれた後、IE 以外のブラウザーでプログラムによってスクロールしようとすると、失敗します。ただし、プログラムでもう一度スクロールすると、通常どおりに動作します。
Update2:呼び出しの最後にプログラムでイベントをキャンセルし、すぐに関数を再度呼び出すメソッドを採用しようとしましたが、問題は解決しませんでした。
次に、jqueryを使用して画像を読み込んでみましたが、うまくいったようです。私は他の2つのstackoverflow記事からそれを適応させました：Can I get the image and load via ajax into div and img onload does not work well in IE7 (caching issueを回避するため)。
使用したコードは次のとおりです。
image = new Image();
image.src = "sample.gif?d=" + new Date(); // passing unique url to fix IE (see link above)
image.onload = function () {
$("#imgcontainer").empty().append(image);
// document.getElementById("imgcontainer").appendChild(image); // This worked, too
// $("#imgcontainer").html("<img src=\"sample.gif?d=" + new Date() + "\"></img>"); // Failed
// document.getElementById("imgcontainer").innerHTML = "<img src=\"sample.gif?d" + new Date() + "\"></img>"; // Failed
$("#imgcontainer").scrollTop(25);
};
image.onerror = function () {
$("#imgcontainer").empty().html("That image is not available.");
}
$('#imgcontainer').empty().html('Loading...');
重要なのは、onload メソッドを使用したことだと思います。onload メソッド内で jQuery.html() を使用しようとしましたが、機能しませんでした。したがって、innerHTML に関連するタイミングの問題と、画像が DOM に読み込まれる方法とタイミングに間違いなく問題があったことが確認されました。そして、onload メソッドを、DOM のネイティブな appendChild メソッドまたは jQuery の同等の appendChild 実装と組み合わせて使用すると、問題が解決されました。
Update3:
以下のmrtshermanの提案について--
これが私のコードです：
var outerDIV, innerDIV, html;
outerDIV = document.createElement("div");
outerDIV.id = "content";
document.getElementById("body_id").appendChild(outerDIV); // attach div to body
innerDIV = document.createElement("div");
innerDIV = "ImageHolder";
image = new Image();
image.src = "sample.gif?d=" + new Date();
document.getElementById("content").appendChild(innerDIV);
document.getElementById("ImageHolder").style.height=image.height + "px";
document.getElementById("ImageHolder").style.width=image.width + "px";
html = "<img src=\"sample.gif\"></img>";
$("#content").scrollTop(100);
$("#ImageHolder").html(html);
画像を配置するための内部 div を作成しました。上記のdivを作成した後、画像のサイズに基づいてサイズを調整しました。js でスクロールを調整してから、innerHTML を介して画像を DOM に添付しましたが、スクロールしませんでした。幅と高さを画像よりも大きい固定サイズに変更すると、スクロールしました。しかし、コンテナを画像よりも大きくすることは、望ましい効果ではありません。ご協力ありがとうございました。
Update4: new Image() の代わりに document.createElement("img") を使用するときにUpdate2 で書いたコードと同等のものは何ですか? onload イベントは、Image オブジェクトと同じ影響を与えていません。ここでは、onload イベントが重要な要素です。
ありがとうございました。