IE vs. Firefox, image.src swapping, offline vs online?

[cjl]

I have a website which allows people to view interesting radiology
cases. It is for teaching radiology residents. It is designed to run
in fullscreen or 'kiosk' mode, at 1024 x 768 resolution only.

http://www.casespace.net

I designed it with firefox (plus the autohide extension) in mind, but
also want to support IE.

Online and offline it works great in Firefox. Offline it also works
great in IE. The problem is with IE online. I allow the user to cycle
through images with either the page up / page down keys, or with the
mouse wheel, or toggle 'cine' mode with the space bar.

I preload all the images before cycling through them. However, when
viewing it online with IE, cycling through images is slow to the point
that it appears to be downloading them each time.

I am swapping images with a function that re-assigns the 'src' of an
image element.

Any thoughts?

-CJL

 

[Thomas 'PointedEars' Lahn]

[http://www.casespace.net]
I preload all the images before cycling through them. However, when
viewing it online with IE, cycling through images is slow to the point
that it appears to be downloading them each time.

I am swapping images with a function that re-assigns the 'src' of an
image element.

Any thoughts?

It would be prudent if you posted at least the URL of the script
you are referring to as the above website does not include one.

It would also be prudent if you did not serve XHTML als text/html
but HTML as text/html (since XHTML [as application/xhtml+xml] is
not supported by IE).


PointedEars

 

[cjl]

It would be prudent if you posted at least the URL of the script
you are referring to as the above website does not include one.

Of course. Sorry. Here it is:
http://casespace.net/data/library.js

The code is complicated, and poorly written, but basically I am
preloading lots of high resolution images, and it's working in Firefox,
but not in IE 6.

It would also be prudent if you did not serve XHTML als text/html
but HTML as text/html (since XHTML [as application/xhtml+xml] is
not supported by IE).

I'm not sure I understand this comment. Are you referring to the
doctype?

-CJL

 

[aundro]

It would also be prudent if you did not serve XHTML als text/html
but HTML as text/html (since XHTML [as application/xhtml+xml] is
not supported by IE).

I'm not sure I understand this comment. Are you referring to the
doctype?

No, he's talking about the HTTP Content-Type header sent by the
webserver. This is rather low-level stuff (that means: JS is not
responsible or capable to change that), but IE indeed doesn't seem to
like documents that are served as application/xhtml+xml.
(I discovered that while toying with VML)

-CJL

Arnaud

 

[Thomas 'PointedEars' Lahn]

Of course. Sorry. Here it is:
http://casespace.net/data/library.js

The code is complicated, and poorly written,

It's better than I have come to expect of such scripts, yet there are
some possibilities of improvement left. For example, you need the
reference to the element with ID 'right_image' very often. It is
highly inefficient to obtain that reference every time it is needed
with document.getElementById('right_image'); the reference can be
stored in a variable once and that variable can be used instead.

but basically I am preloading lots of high resolution images, and
it's working in Firefox, but not in IE 6.

Maybe IE's current cache size is just not big enough?

It would also be prudent if you did not serve XHTML als text/html
but HTML as text/html (since XHTML [as application/xhtml+xml] is
not supported by IE).

I'm not sure I understand this comment. Are you referring to the
doctype?

Exactly. As Internet Explorer does not support XHTML, such markup
is subject to error-correction where the SGML NET delimiter is ignored
(in HTML, <br /> is equivalent to <br>&gt. Firefox and all other
Mozilla/5.0 based user agents support XHTML, however to have it parsed
as XHTML and not as error-corrected HTML, it has to be served with
the proper XHTML Content-Type: application/xhtml+xml. Unfortunately,
IE does not accept responses with this Content-Type since it does not
understand XHTML. There are other ramifications in using XHTML, such
as that document.write() cannot be used since it is not properly
implemented in the XHTML DOM although specified for XHTML 1.0 Transitional
in W3C DOM Level 2 HTML. So nowadays it is still best to not use XHTML
at all if not needed (for example when embedding SVG or MathML).

<http://www.hixie.ch/advocacy/xhtml>


PointedEars

 

[cjl]

It's better than I have come to expect of such scripts, yet there are
some possibilities of improvement left. For example, you need the
reference to the element with ID 'right_image' very often. It is
highly inefficient to obtain that reference every time it is needed
with document.getElementById('right_image'); the reference can be
stored in a variable once and that variable can be used instead.

Thank you, I will make this change.

Maybe IE's current cache size is just not big enough?

This doesn't seem to be the problem. Let me elaborate. No matter what
the size of the cache is, or the cache settings are, when I dynamically
change the 'src' of an image to a preloaded image in Internet Explorer
there is network activity (I think it is checking to see of the
requested image is the same as the one in the cache). Firefox doesn't
do this, and swaps the image with the preloaded image with no network
activity, and very quickly.

Is there something wrong with the way that I preload images? Or is it
something wrong with the headers my servers sends, as detailed here:
http://www.mnot.net/cache_docs/

Is there something happening where image 'src's created statically
(explicitly) are appropriately handled, by dynamic 'src's (generated by
variables) are rechecked before being displayed?

Any help would be greatly appreciated.
-CJL

 

[cjl]

OK, I'm stumped.

Other scripts which dynamically swap the .src of an image object to a
'variable named' preloaded image do not make IE 6 check the network
against the cache, but my script does.

I am either preloading incorrectly (althought it works in Firefox) or I
am image swapping incorrectly (although it works in Firefox).

Help?

-CJL