Preloading images?

[Fabian]

var preload1 = new Image(); preload1.src = "/pic/yay.gif";
var preload2 = new Image(); preload2.src = "/pic/nay.gif";

The above is meant to preload image files, yes? Problem is, it doesnt
seem to be doing so in practice. Any idea where Im going wrong? Could it
be that things work differnetly when in an attached .js file?


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

[Thomas 'PointedEars' Lahn]

Re: Preloading images?

Fabian wrote:
[color=blue]
> var preload1 = new Image(); preload1.src = "/pic/yay.gif";
> var preload2 = new Image(); preload2.src = "/pic/nay.gif";
>
> The above is meant to preload image files, yes?[/color]

Yes, and depending on the (file) size of the image,
it is a Bad Thing as explained a few days ago.
[color=blue]
> Problem is, it doesnt seem to be doing so in practice.[/color]

How do you get that idea? Do you get any script errors?
[color=blue]
> Any idea where Im going wrong?[/color]

It is simply that at least on the Internet you cannot modify the user's
cache settings and what you observe here is possibly what happens if they
do not match what you assume.
[color=blue]
> Could it be that things work differnetly when in an attached .js file?[/color]

Depends on what you mean by `attached'.


PointedEars

[Fabian]

Re: Preloading images?


"Thomas 'PointedEars' Lahn" <PointedEars@we b.de> wrote in message
news:3F99CD17.7 050002@PointedE ars.de...[color=blue]
> Fabian wrote:
>[color=green]
> > var preload1 = new Image(); preload1.src = "/pic/yay.gif";
> > var preload2 = new Image(); preload2.src = "/pic/nay.gif";
> >
> > The above is meant to preload image files, yes?[/color]
>
> Yes, and depending on the (file) size of the image,
> it is a Bad Thing as explained a few days ago.[/color]

The images in question at < 3kb each, and the page wont make sense if
they dont get displayed.
[color=blue][color=green]
> > Problem is, it doesnt seem to be doing so in practice.[/color]
>
> How do you get that idea? Do you get any script errors?[/color]

No errors I can tell anyway. Its at
www.lajzar.co.uk/en/index.html/animals.html (amongst others) if you want
to look. Since I have no idea where in the code a bug of this kind might
reside, it seems pointless posting any in the group at this stage. The
prime suspect was apparently the wrong one.
[color=blue]
> It is simply that at least on the Internet you cannot modify the[/color]
user's[color=blue]
> cache settings and what you observe here is possibly what happens if[/color]
they[color=blue]
> do not match what you assume.[/color]

Id have hoped I would at least be able to modify this particular user's
cache settings to enable preloading.
[color=blue][color=green]
> > Could it be that things work differnetly when in an attached .js[/color][/color]
file?[color=blue]
>
> Depends on what you mean by `attached'.[/color]

<script src="blah.js" language="Guava Juice">
</script>

That kind of attached. There is another way?


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

[Stephen]

Re: Preloading images?

Hi there, and apologies if this is a rather long-winded answer...
Fabian wrote:[color=blue]
> "Thomas 'PointedEars' Lahn" <PointedEars@we b.de> wrote in message
> news:3F99CD17.7 050002@PointedE ars.de...
>[color=green]
>>Fabian wrote:
>>
>>[color=darkred]
>>>var preload1 = new Image(); preload1.src = "/pic/yay.gif";
>>>var preload2 = new Image(); preload2.src = "/pic/nay.gif";
>>>
>>>The above is meant to preload image files, yes?[/color]
>>
>>Yes, [...SNIP...][/color]
>
>
> The images in question at < 3kb each, and the page wont make sense if
> they dont get displayed.
>
>[color=green][color=darkred]
>>>Problem is, it doesnt seem to be doing so in practice.[/color]
>>
>>How do you get that idea? [...SNIP...][/color]
>
>
> No errors I can tell anyway.[/color]

Because there's no code there to detect the error that's happening ...

Its at[color=blue]
> www.lajzar.co.uk/en/index.html/animals.html[/color]

Actually I found at

https://www.lajzar.co.uk/en/animals.html

(amongst others) if you want[color=blue]
> to look. Since I have no idea where in the code a bug of this kind might
> reside, it seems pointless posting any in the group at this stage. The
> prime suspect was apparently the wrong one.
>[/color]

It's not a javascript problem...
[color=blue]
>[color=green]
>>It is simply that at least on the Internet you cannot modify the user's
>>cache settings and what you observe here is possibly what happens if they
>>do not match what you assume.[/color]
>
>
> Id have hoped I would at least be able to modify this particular user's
> cache settings to enable preloading.
>[/color]

I do not believe the user's browser cache settings have anything to do
with whether the images "preload"

[color=blue]
>[color=green][color=darkred]
>>>Could it be that things work differnetly when in an attached .js file?[/color][/color]
>[/color]
No. Don't believe so ...

But here's what happened when I tried loading the "animals.ht ml" page:

1. Browser requests animals.html
2. Server says 200 ok, here it is
3. Browser sees it needs css.css & requests it
4. Server says 200 ok, here it is
5. Browser requests "favicon.ic o"
6. Server says 200 ok, here it is
[ don't get bored yet ...]
7. Browser sees it needs "game1.js" and requests it.
8. Server says 200 ok, here it is:
Note, your Apache server serves this as application/x-javascript.
This is probably as ok as anything, but it may be more usual to serve it
as text/javascript. Though this has nothing to do with the problem.

[This is the interesting part:]
9. Browser sees it needs yay.gif and requests it
10. Server says 404, can't find it (!!)
11. Browser sees it needs nay.gif and requests it
12. Server says 404, can't find it (!!)

Has nothing to do with cache; has to do with the server can't find the
images to serve. They are being requested as /pic/yay.gif (or
/pic/nay.gif) from www.lajzar.co.uk

When you call the checkAnswers() function, you construct the yay/nay
image sources as

"pic/yay.gif"
"pic/nay.gif"

That is, without the starting "/". In this case the images show. So the
answer is that in your preload code you're trying to fetch the images
from the wrong place.

I think you can put an onerror event handler on the image preloads to
detect the error:

preload1 = new Image();
preload1.onerro r=function(){al ert("No Preload-yay");};
preload1.src = "/pic/yay.gif";

ALthough that's not very pretty. And as you've coded the checkAnswers()
function (with the correct image location) the problem fixes itself
(even if image showing might not be as fast as you'd like).

HTH,
Stephen

[Fabian]

Re: Preloading images?


"Stephen" <ssansom@austin .rr.com> wrote in message news:W0omb.1397 8$%
[color=blue][color=green][color=darkred]
> >>>Problem is, it doesnt seem to be doing so in practice.
> >>
> >>How do you get that idea? [...SNIP...][/color]
> >
> >
> > No errors I can tell anyway.[/color]
>
> Because there's no code there to detect the error that's happening ...[/color]

I do my error checking mostly with the Mk I eyeball debugging system.
For added error checking potential, I have two running at the same time.
It is primitive, but it mostly works.
[color=blue]
> Its at[color=green]
> > www.lajzar.co.uk/en/index.html/animals.html[/color]
>
> Actually I found at
> www.lajzar.co.uk/en/animals.html[/color]

As I said, it only *mostly* works :)
[color=blue]
> But here's what happened when I tried loading the "animals.ht ml" page:[/color]

....
[color=blue]
> [This is the interesting part:]
> 9. Browser sees it needs yay.gif and requests it
> 10. Server says 404, can't find it (!!)
> 11. Browser sees it needs nay.gif and requests it
> 12. Server says 404, can't find it (!!)
>
> Has nothing to do with cache; has to do with the server can't find the
> images to serve. They are being requested as /pic/yay.gif (or
> /pic/nay.gif) from www.lajzar.co.uk
>
> When you call the checkAnswers() function, you construct the yay/nay
> image sources as
>
> "pic/yay.gif"
> "pic/nay.gif"[/color]

ok, I am stupid. Thanks for finding the problem. A virtual rate of beer
is on its way to you now ;)


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

[Jim Ley]

Re: Preloading images?

On Sat, 25 Oct 2003 03:08:39 +0200, Thomas 'PointedEars' Lahn
<PointedEars@we b.de> wrote:
[color=blue]
>Fabian wrote:
>[color=green]
>> var preload1 = new Image(); preload1.src = "/pic/yay.gif";
>> var preload2 = new Image(); preload2.src = "/pic/nay.gif";
>>
>> The above is meant to preload image files, yes?[/color]
>
>Yes,[/color]

No, it will depend on the HTTP headers sent with those gifs and user
settings.
[color=blue]
> and depending on the (file) size of the image,
>it is a Bad Thing as explained a few days ago.[/color]

I think you should inform both the various W3 working groups who ares
putting the behaviour into the actual mark-up languages, they seem
happy that it is a good idea.

Jim.

--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[Stephen]

Re: Preloading images?

Fabian wrote:[color=blue]
> "Stephen" <ssansom@austin .rr.com> wrote in message news:W0omb.1397 8$%
>
>[color=green][color=darkred]
>>>>>Problem is, it doesnt seem to be doing so in practice.
>>>>
>>>>How do you get that idea? [...SNIP...]
>>>
>>>
>>>No errors I can tell anyway.[/color]
>>
>>Because there's no code there to detect the error that's happening ...[/color]
>
>
> I do my error checking mostly with the Mk I eyeball debugging system.
> For added error checking potential, I have two running at the same time.
> It is primitive, but it mostly works.
>
>[color=green]
>>Its at
>>[color=darkred]
>>>www.lajzar.co.uk/en/index.html/animals.html[/color]
>>
>>Actually I found at
>>www.lajzar.co.uk/en/animals.html[/color]
>
>
> As I said, it only *mostly* works :)
>
>[color=green]
>>But here's what happened when I tried loading the "animals.ht ml" page:[/color]
>
>
> ...
>
>[color=green]
>>[This is the interesting part:]
>>9. Browser sees it needs yay.gif and requests it
>>10. Server says 404, can't find it (!!)
>>11. Browser sees it needs nay.gif and requests it
>>12. Server says 404, can't find it (!!)
>>
>>Has nothing to do with cache; has to do with the server can't find the
>>images to serve. They are being requested as /pic/yay.gif (or
>>/pic/nay.gif) from www.lajzar.co.uk
>>
>>When you call the checkAnswers() function, you construct the yay/nay
>>image sources as
>>
>>"pic/yay.gif"
>>"pic/nay.gif"[/color]
>
>
> ok, I am stupid. Thanks for finding the problem. A virtual rate of beer
> is on its way to you now ;)
>
>[/color]
Didn't by any means intend to imply you're stupid... I make that same
mistake far more than I'll admit in public :-). You know, at least, that
your initial observation was exactly right: the preload *wasn't* taking
place ... And thanks for the beer!

S.

[Thomas 'PointedEars' Lahn]

Re: Preloading images?

Stephen wrote:
[color=blue]
> It's not a javascript problem...[/color]

That's definitely true.
[color=blue][color=green][color=darkred]
>>>It is simply that at least on the Internet you cannot modify the user's
>>>cache settings and what you observe here is possibly what happens if they
>>>do not match what you assume.[/color]
>>
>> Id have hoped I would at least be able to modify this particular user's
>> cache settings to enable preloading.[/color]
>
> I do not believe the user's browser cache settings have anything to do
> with whether the images "preload"[/color]

But they actually have. What achieved by preloading is only that there is an
Image object created and a resource is accessed by a HTTP request (if not on
the local file system.) That resource is saved in the cache and therefore
need not to be downloaded a second time if, and only if, it is then still in
the cache, which speeds up the display. Although JavaScript is a common way
to do this, you could also do the "preloading " by putting the image on a
previous page and, if supported, even by prefetching the resource with HTML
(`link' element) or CSS (`background-image' property).


PointedEars

[Thomas 'PointedEars' Lahn]

Re: Preloading images?

Jim Ley wrote:
[color=blue]
> [...] Thomas 'PointedEars' Lahn [...] wrote:[color=green]
>>Fabian wrote:
>>[color=darkred]
>>> var preload1 = new Image(); preload1.src = "/pic/yay.gif";
>>> var preload2 = new Image(); preload2.src = "/pic/nay.gif";
>>>
>>> The above is meant to preload image files, yes?[/color]
>>
>>Yes,[/color]
>
> No, it will depend on the HTTP headers sent with those gifs and user
> settings.[/color]

I also wrote that implicitely. The above is in fact *meant*
to preload images. The result does not negate the intent.
[color=blue][color=green]
>> and depending on the (file) size of the image,
>>it is a Bad Thing as explained a few days ago.[/color]
>
> I think you should inform both the various W3 working groups who ares
> putting the behaviour into the actual mark-up languages, they seem
> happy that it is a good idea.[/color]

By putting the functionality into recommendations , it is by no means said
that you should use that feature when not appropriate. It merely provides
the possibility to use the feature. Unless there are no more analog modems,
it seems at least questionable to use that particular feature on the Web,
especially when done without regard to the amount of data to be transmitted.


PointedEars, connected by a 56k modem

[Thomas 'PointedEars' Lahn]

Re: Preloading images?

Fabian wrote:
[color=blue]
> "Thomas 'PointedEars' Lahn" [...] wrote [...][color=green]
>> Fabian wrote:
>>[color=darkred]
>> > var preload1 = new Image(); preload1.src = "/pic/yay.gif";
>> > var preload2 = new Image(); preload2.src = "/pic/nay.gif";
>> >
>> > The above is meant to preload image files, yes?[/color]
>>
>> Yes, and depending on the (file) size of the image,
>> it is a Bad Thing as explained a few days ago.[/color]
>
> The images in question at < 3kb each,[/color]

That is acceptable to me as user of a 56k analog modem.
[color=blue]
> and the page wont make sense if they dont get displayed.[/color]

See the problem? What if the user has disabled images? What if they use a
user agent that cannot display images, let's say a text browser or a Braille
line? The `alt' attribute is your friend. If that does not suffice, you have
greater problems with your concept than that your images do not preload.
[color=blue][color=green]
>> It is simply that at least on the Internet you cannot modify the
>> user's cache settings and what you observe here is possibly what
>> happens if they do not match what you assume.[/color]
>
> Id have hoped I would at least be able to modify this particular user's
> cache settings to enable preloading.[/color]

No, forget about it. My cache is *my* cache.
How dare you change what I find appropriate?
[color=blue][color=green][color=darkred]
>> > Could it be that things work differnetly when in an attached .js
>> > file?[/color]
>> Depends on what you mean by `attached'.[/color]
>
> <script src="blah.js" language="Guava Juice">
> </script>
>
> That kind of attached. There is another way?[/color]

`Attached' could have meant that the .js file is an attachment of an
evil[tm] HTML e-mail and other causes of the problem would have had
to be considered.


PointedEars

[Jim Ley]

Re: Preloading images?

On Sat, 25 Oct 2003 15:41:46 +0200, Thomas 'PointedEars' Lahn
<PointedEars@we b.de> wrote:
[color=blue]
>I also wrote that implicitely. The above is in fact *meant*
>to preload images. The result does not negate the intent.[/color]

No, it's a side effect really....
[color=blue]
>By putting the functionality into recommendations , it is by no means said
>that you should use that feature when not appropriate. It merely provides
>the possibility to use the feature. Unless there are no more analog modems,
>it seems at least questionable to use that particular feature on the Web,
>especially when done without regard to the amount of data to be transmitted.[/color]

How strange, because of certain pecularities in your environment you
choose to impose a behaviour on everyone - it would be trivial of you
to block the preloading, and that would make much more sense all
around.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[Fabian]

Re: Preloading images?


"Thomas 'PointedEars' Lahn" <PointedEars@we b.de> wrote in message
[color=blue][color=green]
> > and the page wont make sense if they dont get displayed.[/color]
>
> See the problem? What if the user has disabled images? What if they[/color]
use a[color=blue]
> user agent that cannot display images, let's say a text browser or a[/color]
Braille[color=blue]
> line? The `alt' attribute is your friend. If that does not suffice,[/color]
you have[color=blue]
> greater problems with your concept than that your images do not[/color]
preload.

Trust me, this is a complete and utter non-issue. This section is being
written with Japanse schoolchildren in mind, particularly the school
computer networks. The school computers in every school I have visited
use Explorer 6 with all normal display options on. As for their home
computers, lets just say that Japanese kids arent noted for thinking
creatively. I can be fairly certain what their home set up is because it
simply wouldnt occur to them that they can change the settings without
permission from tech support. That goes double for their parents.

If they are using a text browser with braille support, learning English
would be the least of their problems for this hypothetical Japanese kid.

If anything, the main useability problem is too much text and not enough
pictures.
[color=blue][color=green]
> > Id have hoped I would at least be able to modify this particular[/color][/color]
user's[color=blue][color=green]
> > cache settings to enable preloading.[/color]
>
> No, forget about it. My cache is *my* cache.
> How dare you change what I find appropriate?[/color]

Perhaps I was writing too subtlely. "This particular user" is a subtle
way of referring to myself.


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

[Thomas 'PointedEars' Lahn]

Re: Preloading images?

Jim Ley wrote:
[color=blue]
> [...] Thomas 'PointedEars' Lahn [...] wrote:[color=green]
>>By putting the functionality into recommendations , it is by no means said
>>that you should use that feature when not appropriate. It merely provides
>>the possibility to use the feature. Unless there are no more analog modems,
>>it seems at least questionable to use that particular feature on the Web,
>>especially when done without regard to the amount of data to be transmitted.[/color]
>
> How strange, because of certain pecularities in your environment you
> choose to impose a behaviour on everyone - it would be trivial of you
> to block the preloading, and that would make much more sense all
> around.[/color]

Your sarcasm aside, I do not impose behaviours on everyone because of my
needs. That I am currently using an analog modem (I had the opportunity to
connect via a 10 MBit LAN until a month ago) emphasizes only that I do know
of what I am writing about when asking to reconsider to use certain
features. There are of course more than one user with an analog modem. What
a Web author wants are visitors. Thus it is not wise to disregard the needs
of *any* visitor if this can be prevented. If you read standards and (W3C)
recommendations thourough, you find this attitude expressed in the features
they describe.


PointedEars

[Jim Ley]

Re: Preloading images?

On Sat, 25 Oct 2003 16:52:31 +0200, Thomas 'PointedEars' Lahn
<PointedEars@we b.de> wrote:
[color=blue]
>Your sarcasm aside, I do not impose behaviours on everyone because of my
>needs.[/color]

So why suggest that other people stop using preloading, an important
usability aid for a great number of people, because you're blessed
with 28K or so connection I've often used 9.6K and shared 28k
connection between 10 people or more. I just modified by
browser/behaviour so as it didn't harm me, you're free to do the same.
[color=blue]
> What
>a Web author wants are visitors. Thus it is not wise to disregard the needs
>[/color]

Preloading is a lot more relevant to low bandwidth users, as it
ensures that the usability increase still works, by ensuring the
materials are available. In high bandwidth situations, it's hardly
relevant as the content comes down, but as I say - it's easy enough to
disable.

Yes authors want visitors, and yes their site needs to be usable -
preloading can provide that - obviously forcing large images etc. down
peoples throats is bad, but that is wholly irrelevant to preloading.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[Thomas 'PointedEars' Lahn]

Re: Preloading images?

Jim Ley wrote:
[color=blue]
> [...] Thomas 'PointedEars' Lahn [...] wrote:
>[color=green]
>>Your sarcasm aside, I do not impose behaviours on everyone because of my
>>needs.[/color]
>
> So why suggest that other people stop using preloading,[/color]

I have only suggested that they think about it before using it.
[color=blue]
> I just modified by browser/behaviour so as it didn't harm me, you're free
> to do the same.[/color]

That may be OK to you, but who of us is now imposing behaviors on others
here when you write that it is therefore also OK to others? Do you really
think that someone except of you will *ever* adjust their settings to fit
for only *one* particular website? There are plenty of other websites out
there! Besides, sometimes it is only possible for the administrator to
change such settings, have you considered that?
[color=blue][color=green]
>> What a Web author wants are visitors. Thus it is not wise to disregard
>> the needs[/color]
>
> Preloading is a lot more relevant to low bandwidth users, as it
> ensures that the usability increase still works, by ensuring the
> materials are available.[/color]

Since users pay for downloaded data as well as connection time I doubt
they would appreciate it if their download or connection time quota is
spoiled by downloading (a bunch of navigational) images they do not want
because they do not need them (and vice-versa.) Multimedia experience is
not everything, sometimes you are just looking for useful information.


PointedEars