Question

I am having some frustrating javascript timing issues.

FYI, the page is a jsp file and attached to said page is a separate js file and the jQuery CDN file. For troubleshooting purposes, I eliminated all unnecessary content and code and pasted what I needed into separate jsp and js files to troubleshoot this specific problem.

If I could display the html and js someplace, that would be great. But for now, I’ll describe it. The page has two buttons, one to load an image and one to toggle a “zoom” feature (more on that later). The user clicks a button, which loads an image using the DOM, specifically innerHTML. This image is surrounded by horizontal and vertical scrollbars. When the user turns on the “zoom” feature, the image records the mouse-click position in an onclick event. So, with this on, the user clicks on the image and a bigger version of the same image is loaded, again, using the DOM and innerHTML. The very last step, the most important one, using the mouse position, the scrollbars will focus and center on the point clicked (using scrollLeft and scrollTop).

This all works flawlessly in IE. However, in non-IE browers (i.e. FireFox), it takes a couple of clicks for the scroll adjustment to catch up to the innerHTML. That is, when the user “zooms” for the first time, the image loads but the scrollbars don’t adjust. It takes two more successive clicks for it to work the same as in IE. I was researching innerHTML and it is slower in FireFox than IE.

How can I fix this? Has anybody else tried to load an image in FireFox using JavaScript and immediately adjust the scroll positioning on the image? Again, it works the first and each time after that in IE. But non-IE browsers are having issues.

I’ve tried using innerHTML, replaceChild, appendChild, nothing I tried so far fixes it.

Thank you.

Update: I wanted to see if this issue is anything inside the scrollbars or just images; so, I replaced the image with < p > … < p > and programmed it to scroll immediately after the **first* image is loaded, via a user-initiated onclick event. Interestingly, it worked. I then replaced the text with the image and it was broken again.

So, after an image is loaded using the DOM (i.e. innerHTML), any attempts to programmatically scroll in non-IE browsers will break. If you programmatically scroll once more, though, it will behave normally.

Update2: I tried employing methods to programmatically cancel the event at the end of the call and immediately call the function again, but that didn’t fix the issue.

Then, I tried loading the image using jquery and that seemed to work. I adapted it from two other stackoverflow articles: Can I get the image and load via ajax into div and img onload doesn't work well in IE7 (to circumvent a caching issue).

Here is the code I used:

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...');

The key, I believe, was using the onload method. I tried employing jQuery.html() inside the onload method and it didn’t work. So, that confirms there was definitely a timing issue related to innerHTML and how and when the image is loaded into the DOM. And the onload method, in combination with either the DOM’s native appendChild method or jQuery’s equivalent appendChild implementation, fixed the problem.

Update3:

Regarding mrtsherman’s suggestion below–

Here is my code:

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);

I created an inner div to place the image. After creating said div, I adjusted it’s size, based on the dimensions of the image. I adjusted the scrolling in js and then attached the image to the DOM, via innerHTML, and it did not scroll. I changed the width and height to some fixed size larger than the image and it scrolled. But that is not the desired affect, to make a container bigger than the image. Thank you for your help.

Update4:
What is the equivalent of the code I wrote in Update2 when using document.createElement(“img”), instead of new Image()? The onload event is not having the same affect as in the Image object; the onload event is an important ingredient, here.

Thank you.

Answer 1

Please see the original question, Update2, for the solution I employed.