IE6 innerHTML + img problem.

[jlizarraga]

Please see this page, specifically the lower-right box:

http://racewayford.autofusion.com/

When you click one of the headings, the images change to match. Minus some needed css tweaking, this box works just fine in Firefox and IE7. In IE6, however, the pictures show up, BUT ARE INVISIBLE!!

Seriously. On my coworker's machine there are little image icons, but on my machine there are invisible boxes that have the dimensions of the image. If you right click and select "show image," the image magically appears! These images are wrapped in anchors and the anchors function normally, just the images don't show up.

I tried using a simple function to preload the images, but unfortunately that didn't change the outcome. But it seems to be a cache issue, because after you click "show image," it will load happily after that if the page is refreshed.

Thanks for any input.

[jlizarraga]

Oh, and sorry about that SUPER ANNOYING flash ad. XD

[jlizarraga]

I should also note that if I put plain text or something else instead of images, it works fine. If I add a border to the images, it shows up around the dimensions of only the first image.

[jscheuer1]

If this is your image preloader:

function imagePreloader() {
     // counter
     var i = 0;
     // create object
     imageObj = new Image();
     // set image list
     images = new Array();
     images[0]="/images/scroller_test_all.jpg"
     images[1]="/images/scroller_test_cars.jpg"
     images[2]="/images/scroller_test_trucks.jpg"
     images[3]="/images/scroller_test_suvs.jpg"
     images[4]="/images/scroller_test_vans.jpg"
     // start preloading
     for(i=0; i<images.length; i++)
     {
          imageObj.src=images[i];
		  //this alert proves the images are being preloaded...
		  //alert(imageObj.src);
     }
}

It's not doing anything because as far as I can tell (using FF developer's extension):

imagePreloader()

is never run (unless it is onload in the body tag). Now, if you have some IE only code that calls it that is shielded from FF by an IE specific comment, it might run under IE (or if it is called from the body tag without conflict), but since it uses the same object for all the images without waiting for any of then to signal that they have completed loading, this:

/images/scroller_test_vans.jpg

is the only image that would be preloaded.

This would be a much more effective preloading routine:

;(function(){
     // set image list
     var images = new Array();
     images[0]="/images/scroller_test_all.jpg"
     images[1]="/images/scroller_test_cars.jpg"
     images[2]="/images/scroller_test_trucks.jpg"
     images[3]="/images/scroller_test_suvs.jpg"
     images[4]="/images/scroller_test_vans.jpg"
     // start preloading
     var loader = new Array();
     for(var i = 0; i < images.length; i++){
          loader[i] = new Image();
          loader[i].src = images[i];
     }
})();

It creates a unique image object for each image, and since it is a totally anonymous function, will run automatically without being called.

There could also be other problems.

[jlizarraga]

LOL. I was coming back to post that I just found the answer, but John here beat me to it of course.

My working code ended up like this:

function imagePreloader() {
// counter
var i = 0;
// create object
imageObj = new Array();
// set image list
images = new Array();
images[0]="/images/scroller_test_all.jpg"
images[1]="/images/scroller_test_cars.jpg"
images[2]="/images/scroller_test_trucks.jpg"
images[3]="/images/scroller_test_suvs.jpg"
images[4]="/images/scroller_test_vans.jpg"
// start preloading
for(i=0; i<images.length; i++){
imageObj[i] = new Image();
imageObj[i].src = images[i];
}
}

I had figured that even though the src of the single image object was being replaced, the loaded srcs would remain in cache. Doh. Thanks for your help.

[jlizarraga]

Random question: why is it that if I don't declare the "i" counter, Firefox gives me an "assignment to undeclared variable" error/warning with for loops? I never see people write their code that way, but firefox seems to prefer it that way.

[jscheuer1]

FF isn't saying that without declaring it that it is an error, just a warning. It depends upon the context (other scripts or functions of the page using a global undeclared i), but it can be a really big problem.

I often do it like so:

for(var i = 0; i < whatever.length; ++i)

And that is pretty much the standard for any well written javascript. You can also declare it ahead of time as you've done, but that's just extra work.

Problems happen when other scripts or functions use i and don't declare it either, then it can be set by your loop. When the other code goes to reference it, i may be out of range of what it expects or of a completely different type of data.

If you declare a variable within the scope of your function it's sort of like, "What happens in Vegas stays in Vegas." The value is local to that function. Otherwise the whole world (all the other code of the page) will have to live with it.

[boogyman]

typically declaring a variable and the type of data that this variable will contain is required. Languages that require this are considered "strong-typed" and some examples are Java, C

Javascript is considered a "loose-typed" language because it doesnt require a declaration or a type cast, however it is good coding practice to do that.

you can just modify the for loop as

for(var=0; i<images.length;i++)

but basically you are receiving the warning because it wasn't declared before it was implemented