JavaScript Discussion Boards

This weekend, I wrote a HTML5 web page with some javascript. This page is composed of eight canvases, each of which displays a certain set of images. The background image is a christmas tree, and each succeeding layer displays a group of ornaments or lights. What ornaments are displayed is determined by the contents of an XML data file. It works fine in the following browsers:

- FireFox v16+
- Google Chrome 23+
- iOS Safari v5.1+

It works partially in the following browsers:

- Opera 12.11 - the background image shows up, but nothing else.
- Android 4.2 Phones - the nutcracker ornament doesn't show up

And doesn't work at all in IE9. (!) This is a *big* problem.

I haven't tried Windows Safari because I hate installing Apple crap on my system, and IE8 (and earlier) is probably a waste of time.

Here's the link to the page: Tree of hope demo[^]

And to download the page source: Zipped web site files[^]

I have no idea why IE9 and Opera refuse to work, but I suspect the problem might be similar in nature. I could really use some help here, because I know just enough about javascript to be considered a deadly weapon.

IE breaks when it tries to call context.drawImage() the first time. I thought it might be because I was only specifying the x/y coordinate, so I added the width and height, but that didn't fix it. Opera breaks in the *2nd* call to context.drawImage() - it draws the tree, but none of the ornament canvases. In both cases, the context in question is indeed valid,and the image it's trying to draw is defined (not null).

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

modified 3-Dec-12 7:35am.

Running it in the IE9 debugger I found that the "complete" member of the current image was false when the script fails. So the browser hasn't loaded the relevant image before trying to draw it.

I managed to get the page to work in Opera by changing both occurrences of

context.drawImage(collection[i].OnImage.ItemImage, collection[i].ImageX, collection[i].ImageY);

to

context.setTransform(1, 0, 0, 1, collection[i].ImageX, collection[i].ImageY);    
context.drawImage(collection[i].OnImage.ItemImage, 0, 0);

I don't know why that should make any difference though.

Graham Breach wrote:
Running it in the IE9 debugger I found that the "complete" member of the current image was false when the script fails. So the browser hasn't loaded the relevant image before trying to draw it.

Is there a way to wait until complete is true before continuing with processing? I got the background image from someone else, and neglected to post-process the background image so that it was a reasonable size on disk. Maybe doing that will fix it...

Graham Breach wrote:
I managed to get the page to work in Opera by changing both occurrences of
context.drawImage(collection[i].OnImage.ItemImage, collection[i].ImageX, collection[i].ImageY);
to
context.setTransform(1, 0, 0, 1, collection[i].ImageX, collection[i].ImageY);    
context.drawImage(collection[i].OnImage.ItemImage, 0, 0);
I don't know why that should make any difference though.

I wonder why that would even matter...

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I have it working in IE9 now - the problem wasn't the images taking too long to load, it was looking in the wrong place for them.

The contents of the XML node is not in a "textContent" member in IE9, it is in "text" instead, so I've changed the parseConfigNodes function like this:

if (child.tagName == "ImageFolder")
{
  _cfgImageFolder = (child.text || child.textContent) + "/";
}
else if (child.tagName == "PetPicsFolder")
{
  _cfgPetsFolder = (child.text || child.textContent) + "/";
}

This should do the trick unless the folder name happens to be falsy.

I was reading up on javascript this morning, and found something called modernizr. Would that have helped in this situation?

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I don't think it would have helped in this case, no. These are just a couple of the typical cross-current-browser problems that come and go.

I also ran process explorer, and firefox slowly increases in memory consumption when that page is displayed. Is that just firefox being firefox, or is that the result of my crappy javascript? Smile | :)

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

Just Firefox I expect - the Chrome debugger heap snapshots don't show any change in memory use, so I wouldn't worry about that.

Processor use is quite high on my PC though - completely redrawing 6-10 large canvases 50 times a second is a bit intensive. Canvases that don't change only need to be drawn once as they are buffered offscreen.

If you don't intend to move the static canvases in relation to each other you can draw them all on one canvas, which saves memory too.

I took your advice and combined all of the static layers into a single one. It loads much faster. I also applied your changes to make IE work, but success with Opera still eludes me. I'm gonna go at it again in the morning before I go to work. Another plus is that it still works on the browsers it already worked on. Smile | :)

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I know this is a dated post, but nonetheless;

FireFox's JS garbage collector has always been notoriously bad ad releasing resources, particularily when using closures or anonymous functions. Without looking at the code that would be my guess as to what was happening there.

//L

I worked on a web page years ago and discovered that images load asynchronously, so I had to resort to tactics I used when I was doing real time computer controlled conveyor systems in that each image load event would set a flag stating it was loaded and called a common routine to determine if all the images (flags set) were loaded before calling the processing routine.

After I did that, my problems went away.

Psychosis at 10
Film at 11

Those who do not remember the past, are doomed to repeat it.
Those who do not remember the past, cannot build upon it.

The background is 602k - jeezus... I'll fix that when I get home. No reason it couldn't be closer to 150k...

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I got it working in Opera AND IE! Smile | :)

I also had to call setTransform before when I cleared a context.

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I just realized I may not have expressed my gratitude for your help. Many thanks, oh great and powerful Oz. Smile | :)

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

OUTSIDE the environment
running it from inside a folder inside mydocuments...
the first warning notice is that active x restricted content wants to run.
Clicked on allow it to run...
Pops up an error on line 162 (access denied)

enabled the debugger and the debugger shows its halted at...

request.open("GET", "treeofhope.xml", false);

looking at the request object properties it shows error number -2147483638
and just a white screen after that.

I suspect that the XML file has not fully loaded and maybe thats what given me a white screen?

Seems to run fine in the development environment on mine though, a completely different story here..... no problems what so ever.

If anything there seems to be a pause of around 1.5 second when the christmas tree lights are doing nothing but thats about it.

I'm running IE 9.0.8112 and Win 7 64bit

I wonder what version of opera you guys are running as on my opera 12.12 its the same as in IE9 white screen.