FAQ Topic - Why are my rollovers so slow? (2010-02-09)

-----------------------------------------------------------------------
FAQ Topic - Why are my rollovers so slow?
-----------------------------------------------------------------------

Images are cached by the browser depending on the headers sent by
the server. If the server does not send sufficient information
for the browser to decide the image is cacheable, the browser
will check if the image has been updated every time you change the
src of an image (in some user settings). To overcome this you
must send suitable headers.

http://www.mnot.net/cache_docs/


The complete comp.lang.javascript FAQ is at
http://jibbering.com/faq/

--

The sendings of these daily posts are proficiently hosted
by http://www.pair.com.

On Feb 9, 10:00*am, "FAQ server" <javascr...@dotinternet.be> wrote:
> -----------------------------------------------------------------------
> FAQ Topic - Why are my rollovers so slow?
> -----------------------------------------------------------------------
>
> Images are cached by the browser depending on the headers sent by
> the server. If the server does not send sufficient information
> for the browser to decide the image is cacheable, the browser
> will check if the image has been updated every time you change the
> src of an image (in some user settings). *To overcome this you
> must send suitable headers.
>

The content of this entry seems to no longer be relevant to the
heading. A more relevant heading might be "Why are my images loaded
repeatedly and aren't cached?"

If the original heading is still relevant, something similar to the
original content should be inserted regarding the common causes (i.e.
alternative images not loading until a mouseover event occurs).

From memory, the original entry recommended using script to pre-load
images. However, that strategy may not be worth recommending given the
preference for "sprites" or "sliding doors", which should probablly be
recommended instead.


--
Rob

RobG wrote:

> "FAQ server" wrote:
>> -----------------------------------------------------------------------
>> FAQ Topic - Why are my rollovers so slow?
>> -----------------------------------------------------------------------
>>
>> Images are cached by the browser depending on the headers sent by
>> the server. If the server does not send sufficient information
>> for the browser to decide the image is cacheable, the browser
>> will check if the image has been updated every time you change the
>> src of an image (in some user settings). To overcome this you
>> must send suitable headers.
>
> The content of this entry seems to no longer be relevant to the
> heading.

How so?

> A more relevant heading might be "Why are my images loaded
> repeatedly and aren't cached?"

That is not a question a beginner would ask, and so none that they would
look for. You need to keep in mind that the FAQ is primarily for those
who do not yet know.

> If the original heading is still relevant, something similar to the
> original content should be inserted regarding the common causes (i.e.
> alternative images not loading until a mouseover event occurs).

What are you talking about?

> From memory, the original entry recommended using script to pre-load
> images. However, that strategy may not be worth recommending given the
> preference for "sprites" or "sliding doors", which should probablly be
> recommended instead.

That does not solve the problem, and it introduces other problems.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

On Feb 9, 9:30*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> RobG wrote:
> > "FAQ server" wrote:
> >> -----------------------------------------------------------------------
> >> FAQ Topic - Why are my rollovers so slow?
> >> -----------------------------------------------------------------------
>
> >> Images are cached by the browser depending on the headers sent by
> >> the server. If the server does not send sufficient information
> >> for the browser to decide the image is cacheable, the browser
> >> will check if the image has been updated every time you change the
> >> src of an image (in some user settings). *To overcome this you
> >> must send suitable headers.
>
> > The content of this entry seems to no longer be relevant to the
> > heading.
>
> How so?
>
> > A more relevant heading might be "Why are my images loaded
> > repeatedly and aren't cached?"
>
> That is not a question a beginner would ask, and so none that they would
> look for. *You need to keep in mind that the FAQ is primarily for those
> who do not yet know.
>
> > If the original heading is still relevant, something similar to the
> > original content should be inserted regarding the common causes (i.e.
> > alternative images not loading until a mouseover event occurs).
>
> What are you talking about?
>
> > From memory, the original entry recommended using script to pre-load
> > images. However, that strategy may not be worth recommending given the
> > preference for "sprites" or "sliding doors", which should probablly be
> > recommended instead.
>
> That does not solve the problem, and it introduces other problems.
>
> PointedEars
> --
> Anyone who slaps a 'this page is best viewed with Browser X' label on
> a Web page appears to be yearning for the bad old days, before the Web,
> when you had very little chance of reading a document written on another
> computer, another word processor, or another network. -- Tim Berners-Lee

What IS the exact correct mechanism for telling the browser to cache
ONLY images, while obeying headers for the rest of the page? I don't
find the answer either in the FAQ or in RFC2616.

In my case, the text matter of the page must not be cached; but the
unchanging images should always be cached forever. My CGI outputs
headers with this C-language function:

void
printNoCachePlusContentType ( void ) {
printf("Cache-control: no-cache, must-revalidate%c", 10);
printf("Content-type: text/html; charset=UTF-8%c%c", 10, 10);
}

which seems to affect the cache just as I want for text matter, but
just as I DON'T want for images.

How can I make images only be cached?

Thanks!

-- ben

lcplben wrote:

> Thomas 'PointedEars' Lahn wrote:
>> RobG wrote:
>> > "FAQ server" wrote:
>> >>
-----------------------------------------------------------------------
>> >> FAQ Topic - Why are my rollovers so slow?
>> >>
-----------------------------------------------------------------------
>> >>
>> >> Images are cached by the browser depending on the headers sent by
>> >> the server. If the server does not send sufficient information
>> >> for the browser to decide the image is cacheable, the browser
>> >> will check if the image has been updated every time you change the
>> >> src of an image (in some user settings). To overcome this you
>> >> must send suitable headers.
>> >>
>> >> [http://www.mnot.net/cache_docs/]
>> [...]

Will you *please* learn to trim your quotes to the relevant minimum.

> What IS the exact correct mechanism for telling the browser to cache
> ONLY images, while obeying headers for the rest of the page? I don't
> find the answer either in the FAQ or in RFC2616.

You do not find the answer in the FAQ directly because your question (which
does not make sense) is unrelated to J(ava)Script/ECMAScript, as is RFC2616
(HTTP/1.1). Read the tutorial this FAQ entry refers to, and ask about it
where it is on-topic.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

On Feb 12, 3:29 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> RobG wrote:
> > Thomas 'PointedEars' Lahn wrote:
> >> RobG wrote:
> >> > Thomas 'PointedEars' Lahn wrote:
> >> >> RobG wrote:
> >> >> > "FAQ server" wrote:
>
> >> -----------------------------------------------------------------------
>
> >> >> FAQ Topic - Why are my rollovers so slow?
>
> >> -----------------------------------------------------------------------
>
> >> >> >> Images are cached by the browser depending on the headers sent by
> >> >> >> the server. If the server does not send sufficient information
> >> >> >> for the browser to decide the image is cacheable, the browser
> >> >> >> will check if the image has been updated every time you change the
> >> >> >> src of an image (in some user settings). To overcome this you
> >> >> >> must send suitable headers.
>
> >> >> > The content of this entry seems to no longer be relevant to the
> >> >> > heading.
>
> >> >> How so?
>
> >> > The original content addressed the issue of alternative roll-over
> >> > images not being loaded when the primary image was "rolled-over". The
> >> > symptom was that users saw firstly the primary image replaced by an
> >> > empty image element, then the alternative image. One fix was to pre-
> >> > load the alternative images, another was to use sprites or sliding
> >> > images.
>
> >> > The new content seems to be more generally about caching of images,
> >> > which was not the primary issue related to "rollovers" and will not
> >> > solve the issue in the question.
>
> >> >> > A more relevant heading might be "Why are my images loaded
> >> >> > repeatedly and aren't cached?"
>
> >> >> That is not a question a beginner would ask,
>
> >> > That is pure speculation on your behalf and utterly subjective -
>
> >> Of course it is subjective, but it is not based on speculation. I am
> >> referring to the time when I have been a beginner years ago (AFAIR),
> >> and to my hearing/reading questions of beginners after that for years.
>
> >> > what is your definition of a beginner? What is a beginners' question?
>
> >> A question that is addressing a not yet understood symptom of a problem,
> >> like this one. The problem as it presents itself to a beginner is the
> >> symptom of the problem, that rollovers are slow. They would ask "Why
> >> are my rollovers slow?", not "Why are my images loaded repeatedly and
> >> aren't cached?", because it is very likely that they are not even aware
> >> that it has to do with caching.
>
> >> > And why should an FAQ be restricted to questions a imaginary beginner
> >> > might ask?
>
> >> Because frequently asked questions are frequently asked by beginners.
>
> > But they are not the only ones that an FAQ should be directed at as it
> > is not only beginners that frequently ask questions.
>
> You miss the point. This is a typical beginner's question and you are
> trying to reword it so that it is no longer a beginners question. That
> is a bad idea.


Ok, I'll try one last time. I'm not trying to change the question at
all. I suggested an alternative question that more closely matched the
content of the answer. I have never said the original question should
be removed nor that its wording be changed.

What I did say was that the original question should remain with its
original answer, I've said it repeatedly. The new content should be
added to that answer or provided as an additional FAQ entry, I'll
leave that decision to the FAQ maintainer.

[...]
> >> But that is not the purpose of a FAQ. The purpose of a FAQ is
to
> >> provide answers to frequently asked questions, as the name says,
> >> and the question as you worded is not one that is frequently asked to
> >> begin with. Guess why.
>
> > The content of the answer doesn't match the question. The most common
> > issue with rollovers has nothing to do with image caching.
>
> But it does, and it has.

No, it doesn't. The issue with slow rollovers occurs when the page
content is first loaded, before any images have been downloaded. If
they've never been downloaded, how can caching have anything to do
with it? Having a single image for all rollovers completely removes
caching as an issue. It doesn't matter if the image is cached or not,
if the primary image is there then so is the rollover alternative.

[...]
> >> The only thing that I can see described here is your inability
of
> >> answering a simple question.
>
> > Then you are an idiot.
>
> Interesting idea. I am idiot because you are unable to answer my simple
> question?

No, because I have answered your question several times and you are
unable to see that I have done so. You may disagree with my answer,
but your assertion that I haven't given it is plainly wrong.


--
Rob

On Feb 12, 1:43*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> RobG wrote:
> > Thomas 'PointedEars' Lahn wrote:
> >> RobG wrote:
> >> > Thomas 'PointedEars' Lahn wrote:
> >> >> RobG wrote:
> >> >> > And why should an FAQ be restricted to questions a imaginary
> >> >> > beginner might ask?
> >> >> Because frequently asked questions are frequently asked by beginners.
> >> > But they are not the only ones that an FAQ should be directed at as it
> >> > is not only beginners that frequently ask questions.
> >> You miss the point. *This is a typical beginner's question and you are
> >> trying to reword it so that it is no longer a beginners question. *That
> >> is a bad idea.
>
> > Ok, I'll try one last time. I'm not trying to change the question at
> > all. I suggested an alternative question that more closely matched the
> > content of the answer. I have never said the original question should
> > be removed nor that its wording be changed.
>
> > What I did say was that the original question should remain with its
> > original answer, I've said it repeatedly. The new content should be
> > added to that answer or provided as an additional FAQ entry, I'll
> > leave that decision to the FAQ maintainer.
>
> Maybe that is what you wanted to do -- who knows? --, but not remotely what
> you actually did:
>
> ,-<news:d9462102-da4a-4afb-862d-509e42301b12@v20g2000prb.googlegroups.com>
> |
> | The content of this entry seems to no longer be relevant to the
> | heading. A more relevant heading might be "Why are my images loaded
> | repeatedly and aren't cached?"
>
> Here you clearly suggested to change the heading of the FAQ entry.

That was not my intention. I was attempting to highlight that the
heading doesn't fit the content, not that the heading for rollovers
should be removed altogether.


> Therefore, I debated that this change would be useful, on the grounds that
> a beginner's question would be reworded into something that is not a
> beginner's question (and therefore is unlikely to be looked for by people
> in the greatest target audience of a FAQ).

Without addressing the fact that the content doesn't fit the heading,
which was the primary thrust of my comments.


> ,-[ibid.]
> |
> | If the original heading is still relevant, something similar to the
> | original content should be inserted regarding the common causes (i.e.
> | alternative images not loading until a mouseover event occurs).
>
> Here you clearly suggested to change the content of that FAQ entry if your
> first suggestion would not be feasible.

I suggested restoring the original content because (in my opinion) the
new content doesn't fit with the heading.


> *Therefore, I debated that the
> content of the FAQ entry would be in need of change because beginner's
> questions are seldom, if ever, asked to the point of the solution (as
> presented there),

Which is where you diverged from the main issue.


> and the current content provides the correct answer
> to the question already.

That is the more important point on which we differ.


[...]
> > No, it doesn't. The issue with slow rollovers occurs when the page
> > content is first loaded, before any images have been downloaded. If
> > they've never been downloaded, how can caching have anything to do
> > with it?
>
> Your description indicates that you employ a rather unusual definition of
> "rollover".

Not at all, it fits with your description below.


> A "rollover" -- more precisely a "rollover *effect*" -- in fact occurs when
> the pointer of a pointing device is positioned above ("over") an element
> (the trigger element), "above" referring to its position on a virtual third
> z-axis of two-dimensional displays (for which the informal term "*roll*
> over" came up because of trackballs, and later ball mice) --, and that
> element or another element (the target element) is undergoing a certain
> change as a result. *The target element usually, but not necessarily,
> changes back to its original state when and if the pointer leaves the
> trigger element.
>
> See also: <http://en.wikipedia.org/wiki/Rollover_%28web_design%29>
>
> Usually slow rollover effects are observed when two or more image resources
> are involved in the effect that are exchanged for one another, or for no
> image, because data of an image resource needs to be downloaded before it
> can be used for display. *As a result, attempting to cause image data,
> especially the data of the image _not_ currently displayed, to be stored in
> the local cache ("be cached") beforehand can solve the problem of slow
> rollover effects: if image data is already cached it does not need to be
> retrieved by slower request from the Web server when and if the rollover
> effect is supposed to occur.

This is the point at issue. The second image is not not downloaded
until the first rollover effect is initiated. Since it hasn't been
downloaded, it can't be cached and any solution based on caching will
not have any effect on its speed.

Caching may help speed image display in subsequent rollover events,
but that is usually not an issue. If it is, then the information about
caching can be referenced (if it is in a separate entry) or added
after information about pre-loading images and CSS based or assisted
solutions (such as sprites and sliding doors).


> *This fact is independent of the size and
> position of the image, and therefore applies to the "sliding doors"
> technique (layered background images) as well, which still uses *several*
> images by default.

The solution that a sliding door offers is that the primary and
secondary images are combined into one image and downloaded together -
they are the same image. The rollover effect is achieved by sliding
the image rather than changing src attribute values.

It is the change of src attribute that has a tenuous relationship with
caching, a relationship that I feel is irrelevant. But even if it was
relevant, a solution that removes changing the src attribute removes
the relevance of caching altogether. The issue isn't how fast the
image displays when the page is loaded, but how long the alternative
image takes to display when the rollover effect is initiated.

Caching is relevant to image display in general and is not
specifically related to rollover speed. If suggestions about caching
and image display are in the FAQ, the the question should be more
directly related to image display in general and not just rollovers.

Phrase it however you want, but mentioning rollovers is misleading.


[...]
> > Having a single image for all rollovers completely removes caching as an
> > issue.
>
> True, but the "sliding doors" technique that you are referring to does not
> use only one image. *Perhaps you are referring to a different technique..

The sliding doors technique I was referring to (see below) uses one
image that slides in one direction, either left and right or up and
down. There is also a technique called "sprites", which genearlly uses
a larger number of images combined into one that are moved in two
dimensions, not one:

<URL: http://css-tricks.com/css-sprites/ >

In that techique, a single combined image can be used for all the
rollovers, icons and small images on a page.


[...]*
> > if the primary image is there then so is the rollover alternative.
>
> Perhaps you want to read <http://www.alistapart.com/articles/slidingdoors/>
> more thoroughly.

There is more than one technique referred to as "sliding door", the
following article explains it in detail:

<URL: http://kailoon.com/css-sliding-door-using-only-1-image/ >

My use of the plural "doors" has led you to the listapart description,
I applogise for that. It was not the technique I intended to refer to.


--
Rob

RobG wrote:

> Thomas 'PointedEars' Lahn wrote:
>> RobG wrote:
>> ,-[ibid.]
>> |
>> | If the original heading is still relevant, something similar to the
>> | original content should be inserted regarding the common causes (i.e.
>> | alternative images not loading until a mouseover event occurs).
>>
>> Here you clearly suggested to change the content of that FAQ entry if
>> your first suggestion would not be feasible.
>
> I suggested restoring the original content because (in my opinion) the
> new content doesn't fit with the heading.

Non sequitur. You suggested a change to the FAQ as it is. If your
suggestion was not implemented in the first place, nothing would needed to
be restored.

>> Therefore, I debated that the content of the FAQ entry would be in need
>> of change because beginner's questions are seldom, if ever, asked to the
>> point of the solution (as presented there),
>
> Which is where you diverged from the main issue.

No. I simply did not and still do not follow your suggestion, because I
think that because the question is an obvious beginner's question, the
answer fits it quite well, and I am not convinced that adding a *not*
frequently asked question and answer would benefit the list of Frequently
Asked Questions commonly known as "FAQ".

>> and the current content provides the correct answer to the question
>> already.
>
> That is the more important point on which we differ.

That is the basic point on which we differ.

> [...]
>> > No, it doesn't. The issue with slow rollovers occurs when the page
>> > content is first loaded, before any images have been downloaded. If
>> > they've never been downloaded, how can caching have anything to do
>> > with it?
>>
>> Your description indicates that you employ a rather unusual definition
>> of "rollover".
>
> Not at all, it fits with your description below.

No, it does not. The (slow) rollover does _not_ occur "when the page
content is first loaded" as you described. It occurs *afterwards*, when
the event takes place that triggers the rollover, as I described:

>> A "rollover" -- more precisely a "rollover *effect*" -- in fact occurs
>> when the pointer of a pointing device is positioned above ("over") an
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^
>> element (the trigger element), [...]
>> See also: <http://en.wikipedia.org/wiki/Rollover_%28web_design%29>
>>
>> Usually slow rollover effects are observed when two or more image
>> resources are involved in the effect that are exchanged for one another,
>> or for no image, because data of an image resource needs to be
>> downloaded before it can be used for display. As a result, attempting
>> to cause image data, especially the data of the image _not_ currently
>> displayed, to be stored in the local cache ("be cached") beforehand can
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>> solve the problem of slow rollover effects: if image data is already
>> cached it does not need to be retrieved by slower request from the Web
>> server when and if the rollover effect is supposed to occur.
>
> This is the point at issue. The second image is not not downloaded
> until the first rollover effect is initiated.

That is a major idea of a solution that uses caching: To download the
second resource beforehand, and provide information that the downloaded
resource is still current if and when it is needed again.

> Since it hasn't been downloaded, it can't be cached and any solution
> based on caching will not have any effect on its speed. [...]

Non sequitur.

>> This fact is independent of the size and position of the image, and
>> therefore applies to the "sliding doors" technique (layered background
>> images) as well, which still uses *several* images by default.
>
> The solution that a sliding door offers is that the primary and
> secondary images are combined into one image and downloaded together -
> they are the same image. The rollover effect is achieved by sliding
> the image rather than changing src attribute values.
>
> It is the change of src attribute that has a tenuous relationship with
> caching, [...]

You are overlooking here that there is not "the same image" for an HTTP
client without sufficient metadata. Even the same URI does not need to
mean the same image data at different times. Therefore, caching and cache
control is relevant to *all* techniques where the same URI is referred to
in different places or at different times, as from cache-controlling
headers the HTTP client can tell whether the same URI actually is supposed
to refer to the same resource (here: the same image data) at a specific
point in time.

> [...]
> Caching is relevant to image display in general and is not
> specifically related to rollover speed. If suggestions about caching
> and image display are in the FAQ, the the question should be more
> directly related to image display in general and not just rollovers.

You are still missing the point of a FAQ and its entries.

> Phrase it however you want, but mentioning rollovers is misleading.

You have got it backwards. The FAQ entry does _not_ in any way indicate
that caching would only be relevant to rollovers; that merely springs from,
shall we say, your vivid imagination. Instead, it indicates that this
particular question has been asked frequently, and that cache control is a,
if not /the/, recommended solution for the problem presented by the
question.

>> > if the primary image is there then so is the rollover alternative.
>>
>> Perhaps you want to read
>> <http://www.alistapart.com/articles/slidingdoors/> more thoroughly.
>
> There is more than one technique referred to as "sliding door", the

You are mistaken.

> following article explains it in detail:
>
> <URL: http://kailoon.com/css-sliding-door-using-only-1-image/ >
>
> My use of the plural "doors" has led you to the listapart description,
> I applogise for that. It was not the technique I intended to refer to.

If you had done more thorough research, you would have observed that "the
listapart description" is not just any article. It is *the* *original*
article (published in 2003-10 CE), hence(forth) defining the term "sliding
door(s)" with regard to Web development.

Everything else is referring to *another* technique; in this case "sliding
doors with/using ...", techniques merely derived from the former. "Sliding
door(s)" alone with regard to Web development is referring to overlapping
background images. Nothing more, nothing less.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:

> I am getting the idea that you are being deliberately obtuse. Again, for
> the intellectually challenged among us:

‘There is no “us”

Eric Bednarz wrote:

> Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:
>> I am getting the idea that you are being deliberately obtuse.
>> Again, for the intellectually challenged among us:
>
> ‘There is no “us”

A statement that proves itself wrong.


PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:

> Eric Bednarz wrote:
>
>> Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:
>>> I am getting the idea that you are being deliberately obtuse.
>>> Again, for the intellectually challenged among us:
>>
>> ‘There is no “us”
>
> A statement that proves itself wrong.

Quite (I like to call this enlightenment by proxy, and it looks
promising so far).

In comp.lang.javascript message <4b70a589$0$271$14726298@news.sunsite.dk
>, Tue, 9 Feb 2010 00:00:02, FAQ server <javascript@dotinternet.be>
posted:

>FAQ Topic - Why are my rollovers so slow?

That is not what most possible questioners should be asking.

A better question is "How should I code rollovers", and it should be
answered by giving a well-coded rollover of the usual sort. Probably
some text on preloading images should be included.

Help with other sorts of rollovers can be added, perhaps in a
demonstration page, if felt useful.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk DOS 3.3 6.20 ; WinXP.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>
My DOS <URL:http://www.merlyn.demon.co.uk/batfiles.htm> - also batprogs.htm.