加载图像（JavaScript/DOM）后，滚动调整在非 IE 浏览器中无法正常工作； insideHTML 的计时问题

Question

我遇到了一些令人沮丧的 javascript 计时问题。

仅供参考，该页面是一个 jsp 文件，附加到该页面的是一个单独的 js 文件和 jQuery CDN 文件。为了进行故障排除，我消除了所有不必要的内容和代码，并将所需内容粘贴到单独的 jsp 和 js 文件中以解决此特定问题。

如果我可以在某个地方显示 html 和 js，那就太好了。但现在，我将描述它。该页面有两个按钮，一个用于加载图像，一个用于切换“缩放”功能（稍后会详细介绍）。用户单击一个按钮，该按钮会使用 DOM（特别是innerHTML）加载图像。该图像被水平和垂直滚动条包围。当用户打开“缩放”功能时，图像会在 onclick 事件中记录鼠标单击位置。因此，启用此功能后，用户单击图像，并再次使用 DOM 和innerHTML 加载同一图像的更大版本。最后一步，也是最重要的一步，使用鼠标位置，滚动条将聚焦并集中在单击的点上（使用scrollLeft和scrollTop）。

这一切在 IE 中都能完美运行。然而，在非 IE 浏览器（即 FireFox）中，需要单击几次滚动调整才能赶上innerHTML。也就是说，当用户第一次“缩放”时，图像会加载，但滚动条不会调整。需要连续单击两次才能像在 IE 中一样工作。我正在研究innerHTML，它在FireFox 中比IE 慢。

我该如何解决这个问题？有没有其他人尝试使用 JavaScript 在 FireFox 中加载图像并立即调整图像上的滚动位置？同样，它在 IE 中第一次和之后每次都有效。但非 IE 浏览器存在问题。

我尝试过使用innerHTML，replaceChild，appendChild，到目前为止我尝试过的都没有解决这个问题。

谢谢。

更新：我想看看这个问题是滚动条内的任何内容还是只是图像；所以，我将图像替换为 < p＞ ...< p＞并将其编程为通过用户启动的 onclick 事件在加载**第一个**图像后立即滚动。有趣的是，它起作用了。然后我用图像替换了文本，它又被破坏了。

因此，使用 DOM（即innerHTML）加载图像后，任何在非 IE 浏览器中以编程方式滚动的尝试都将失败。不过，如果您再次以编程方式滚动，它将表现正常。

更新2：我尝试使用方法在调用结束时以编程方式取消事件并立即再次调用该函数，但这并没有解决问题。

然后，我尝试使用 jquery 加载图像，这似乎有效。我改编自另外两篇 stackoverflow 文章：可以我获取图像并通过 ajax 加载到 div 和 img onload 在 IE7 中无法正常工作（以避免缓存问题） 。

这是我使用的代码：

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 实现相结合，解决了该问题。

更新3：

关于下面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，但它没有滚动。我将宽度和高度更改为比图像大的固定尺寸，然后它滚动了。但这并不是使容器比图像更大的预期效果。感谢您的帮助。

更新4： 使用 document.createElement("img") 而不是 new Image() 时，我在 Update2 中编写的代码等效于什么？ onload 事件与 Image 对象中的影响不同； onload 事件是这里的一个重要组成部分。

谢谢。

Answer 1

如果您知道新图像的尺寸，那么我会先发送这些尺寸。然后，您可以调整图像容器的大小，调整滚动条，然后获取图像。

Answer 2

请参阅原始问题Update2，了解我采用的解决方案。