Image preload experiments (IE vs. Firefox) - Not a FAQ

[cjl]

OK:

I am really scratching my head over a preload / image swapping problem,
so I started conducting experiments:

http://www.saintrays.net/experiment1.html
http://www.saintrays.net/experiment2.html
http://www.saintrays.net/experiment3.html

View the source of each page to see the relevant javascript. All three
experiments work smoothly in both Firefox and IE for me.

The website I am developing uses the method in experiment3, that is at
run time a javascript file is dynamically added to the document which
contains some relevant variables, images are preloaded, and then
swapped. It can be seen at:

http://www.casespace.net/

It is designed to run at 1024 x 768 only, and the browser must be
'fullscreen'. This is accomplished with 'F11' in IE (plus enabling the
autohide feature after right clicking on the remaining title bar) and
with the 'Autohide' extension for Firefox. The instructions need work,
but are fairly straightforward.

The problem is that for casespace.net image swapping is not smooth in
IE, and it seems to recheck with the website each time I swap an image,
even though they are preloaded, greatly slowing down the ability to
quickly scroll through images. It works flawlessly in Firefox.

I can't find the difference between experiment3 (which works in IE
without the constant checking) and the method I use on casespace.

Any help would be appreciated. I am going nuts. Arrrgh.

-CJL

 

[RobG]

OK:

I am really scratching my head over a preload / image swapping problem,
so I started conducting experiments:

http://www.saintrays.net/experiment1.html
http://www.saintrays.net/experiment2.html
http://www.saintrays.net/experiment3.html [...]

The problem is that for casespace.net image swapping is not smooth in
IE, and it seems to recheck with the website each time I swap an image,
even though they are preloaded, greatly slowing down the ability to
quickly scroll through images. It works flawlessly in Firefox.

Your casespace.net site did not work at all for me in either IE or Firefox.

I can't find the difference between experiment3 (which works in IE
without the constant checking) and the method I use on casespace.

Any help would be appreciated. I am going nuts. Arrrgh.

You script seemed overly complex to me - here's an alternative that
seems to work fine for me:


<script type="text/javascript">

var PicObj = {
loaded : 0,
showing : 0,
pics : [],
imgEl : null
};

function loader(numToLoad){
PicObj.imgEl = document.getElementById('the_image');
for (var i=0; i<numToLoad; ++i) {
PicObj.pics = new Image();
PicObj.pics.src = 'mr0_' + i + '.jpg';
}
PicObj.loaded = --i;
PicObj.pics[PicObj.loaded].onload = looper;
}

function looper() {
PicObj.imgEl.src = PicObj.pics[PicObj.showing].src;
PicObj.showing = ++PicObj.showing % PicObj.loaded;
timeout_state = setTimeout("looper()", 50);
}

window.onload = function(){loader(26);}

</script>

 

[cjl]

Your casespace.net site did not work at all for me in either IE or Firefox.

I am interested to know what didn't work, particularly in Firefox,
because it is working fine here. Did you read through the
instructions?

You script seemed overly complex to me...

I know. I'm doing some strange things at 'run time', and I'm not a
very good programmer.

Thanks for the example code, I will go back to the drawing board with
the image preloading and swapping code, and see if I can't find the
problem through trial and error.

-CJL

 

[Thomas 'PointedEars' Lahn]

I am interested to know what didn't work, particularly in Firefox,
because it is working fine here. Did you read through the
instructions?

The problem, which puzzled me at first as well, is that you do not say
explicitly one has to click through all the instructions pages before
there is usable content on the Web site. "If you need instructions"
does not read much as being compulsory, however it is

Otherwise, it works fine im my Firefox 1.0.7/Linux, even though I do not
understand why you would have to make the UI so difficult to use (almost
keyboard-only, where the "almost" being an issue by itself). And many
conditions you set, as you say, "consistent user experience" (where there
is a typo, BTW), like browser and display resolution, are not really
required. Never ever expect anyone to change a running system because
of your Web site.


HTH

PointedEars

 

[cjl]

The problem, which puzzled me at first as well, is that you do not say
explicitly one has to click through all the instructions pages before
there is usable content on the Web site. "If you need instructions"
does not read much as being compulsory, however it is
Sorry.

Otherwise, it works fine im my Firefox 1.0.7/Linux,
Good.
even though I do not
understand why you would have to make the UI so difficult to use (almost
keyboard-only, where the "almost" being an issue by itself). And many
conditions you set, as you say, "consistent user experience" (where there
is a typo, BTW), like browser and display resolution, are not really
required. Never ever expect anyone to change a running system because
of your Web site.

Thank you for the feedback. My users will be a very narrow subset of
people, namely radiology residents at my hospital, where I can ensure
they all have the proper setup. I know that the UI needs some work,
but what I didn't tell you is that the controls very closely mimic are
PACS system, so most residents are comfortable with controlling it.

The real problem is still the preloading / image swapping in IE, which
I am unable to solve at this point. Any thoughts on this? Have you
tried it in IE to see what I am talking about.

Thanks again,
CJL

 

[Thomas 'PointedEars' Lahn]

Thank you for the feedback.

You're welcome.

My users will be a very narrow subset of people, namely radiology
residents at my hospital, where I can ensure they all have the proper
setup. I know that the UI needs some work, but what I didn't tell you
is that the controls very closely mimic are PACS system, so most
residents are comfortable with controlling it.

So it should not be a public Web site in the first place, should it?

The real problem is still the preloading / image swapping in IE, which
I am unable to solve at this point. Any thoughts on this?

Not yet.

Have you tried it in IE to see what I am talking about.

Sorry, I don't have IE here.


PointedEars

 

[robert.waters]

IE specifically has issues with caching images, see if this page:
http://www.netmechanic.com/news/vol6/javascript_no1.htm is relevant to
your situation.

 

[cjl]

IE specifically has issues with caching images, see if this page:
http://www.netmechanic.com/news/vol6/javascript_no1.htm is relevant to
your situation.

Thank you for the information.

While the reference describes the problem I am having with IE, the
solution does not work for me, as I am already using relative paths.

I am going to continue my experiments...arrrgh.

-CJL