我遇到了一些令人沮丧的 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 事件将其编程为在加载 **first* 图像后立即滚动。有趣的是，它奏效了。然后我用图像替换了文本，它又被打破了。
因此，在使用 DOM（即 innerHTML）加载图像后，任何在非 IE 浏览器中以编程方式滚动的尝试都会中断。但是，如果您以编程方式再次滚动，它将正常运行。
Update2：我尝试使用方法在调用结束时以编程方式取消事件并立即再次调用该函数，但这并没有解决问题。
然后，我尝试使用 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，它没有滚动。我将宽度和高度更改为大于图像的某个固定大小，然后它滚动了。但这不是想要的效果，使容器比图像更大。感谢您的帮助。
Update4：当使用 document.createElement("img") 而不是 new Image() 时，我在Update2 中编写的代码等效于什么？onload 事件的影响与 Image 对象中的不同；onload 事件在这里是一个重要的组成部分。
谢谢你。