sign in | join about | help | sitemap
Connecting Tech Pros Worldwide
cosmic foo's Avatar

many images delay even when cached


Question posted by: cosmic foo (Guest) on July 26th, 2005 03:15 PM
I have a page with about 100 images of about 10k each.
where a typical img tag looks like this,
<img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
border="0">
Not all the images need to be viewed at once, depending on what category is
selected, only about 10 images are seen at any one time.
I hide and show categories of images by setting a div container
display:none/block or visibility:hidden/visible.

Even though the images are cached on the client, when the page loads in ie,
there is still a few seconds delay while it counts down until there are no
items remaining.
In firefox there is the same delay but instead of counting down it just says
'waiting for..'

From what i understand, the way to get around this delay when loading is not
to set the src of the image tags until later, when the images need to be
viewed (using javascript).
That's not a problem and i have tried it, and it works, but now (for some
reason) the browser forgets that the images have been cached whenever the
user returns to the site, and has to download the images from the server,
the first time a particular category of images is viewed.
This, i presume, is happening because the src attribute is no longer
hard-coded in the source, and the browser cannot associate an entry in the
cache with the src of an image that is set via javascript?

So it looks like the only solution may be to generate the html on the fly,
when it is needed, with the src intact, or to use frames to get the html
when it is needed.

Am i missing something here?
Thanks.


10 Answers Posted
Jedi Fans's Avatar
Guest - n/a Posts
#2: Re: many images delay even when cached

cosmic foo wrote:[color=blue]
> I have a page with about 100 images of about 10k each.
> where a typical img tag looks like this,
> <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> border="0">
> Not all the images need to be viewed at once, depending on what category is
> selected, only about 10 images are seen at any one time.
> I hide and show categories of images by setting a div container
> display:none/block or visibility:hidden/visible.
>
> Even though the images are cached on the client, when the page loads in ie,
> there is still a few seconds delay while it counts down until there are no
> items remaining.
> In firefox there is the same delay but instead of counting down it just says
> 'waiting for..'
>
> From what i understand, the way to get around this delay when loading is not
> to set the src of the image tags until later, when the images need to be
> viewed (using javascript).
> That's not a problem and i have tried it, and it works, but now (for some
> reason) the browser forgets that the images have been cached whenever the
> user returns to the site, and has to download the images from the server,
> the first time a particular category of images is viewed.
> This, i presume, is happening because the src attribute is no longer
> hard-coded in the source, and the browser cannot associate an entry in the
> cache with the src of an image that is set via javascript?
>
> So it looks like the only solution may be to generate the html on the fly,
> when it is needed, with the src intact, or to use frames to get the html
> when it is needed.
>
> Am i missing something here?
> Thanks.
>
>[/color]
you could try a css method for preloading?:

http://www.ilovejackdaniels.com/css...mages-with-css/
cosmic foo's Avatar
Guest - n/a Posts
#3: Re: many images delay even when cached


"Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
news:42e6479c$1_3@mk-nntp-2.news.uk.tiscali.com...[color=blue]
> cosmic foo wrote:[color=green]
> > I have a page with about 100 images of about 10k each.
> > where a typical img tag looks like this,
> > <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> > border="0">
> > Not all the images need to be viewed at once, depending on what category[/color][/color]
is[color=blue][color=green]
> > selected, only about 10 images are seen at any one time.
> > I hide and show categories of images by setting a div container
> > display:none/block or visibility:hidden/visible.
> >
> > Even though the images are cached on the client, when the page loads in[/color][/color]
ie,[color=blue][color=green]
> > there is still a few seconds delay while it counts down until there are[/color][/color]
no[color=blue][color=green]
> > items remaining.
> > In firefox there is the same delay but instead of counting down it just[/color][/color]
says[color=blue][color=green]
> > 'waiting for..'
> >
> > From what i understand, the way to get around this delay when loading is[/color][/color]
not[color=blue][color=green]
> > to set the src of the image tags until later, when the images need to be
> > viewed (using javascript).
> > That's not a problem and i have tried it, and it works, but now (for[/color][/color]
some[color=blue][color=green]
> > reason) the browser forgets that the images have been cached whenever[/color][/color]
the[color=blue][color=green]
> > user returns to the site, and has to download the images from the[/color][/color]
server,[color=blue][color=green]
> > the first time a particular category of images is viewed.
> > This, i presume, is happening because the src attribute is no longer
> > hard-coded in the source, and the browser cannot associate an entry in[/color][/color]
the[color=blue][color=green]
> > cache with the src of an image that is set via javascript?
> >
> > So it looks like the only solution may be to generate the html on the[/color][/color]
fly,[color=blue][color=green]
> > when it is needed, with the src intact, or to use frames to get the html
> > when it is needed.
> >
> > Am i missing something here?
> > Thanks.
> >
> >[/color]
> you could try a css method for preloading?:
>
> http://www.ilovejackdaniels.com/css...mages-with-css/[/color]

Thanks but wouldn't that just retain the delay when the page loads, which i
am trying to avoid?
What would be great is if display:none caused an image not to load until it
was changed to display:block.
Either that or if there was some way to set the src of an image using
javascript and still have it cached
when you return to the site.


Jedi Fans's Avatar
Guest - n/a Posts
#4: Re: many images delay even when cached

cosmic foo wrote:[color=blue]
> "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
> news:42e6479c$1_3@mk-nntp-2.news.uk.tiscali.com...[color=green]
>> cosmic foo wrote:[color=darkred]
>>> I have a page with about 100 images of about 10k each.
>>> where a typical img tag looks like this,
>>> <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
>>> border="0">
>>> Not all the images need to be viewed at once, depending on what category[/color][/color]
> is[color=green][color=darkred]
>>> selected, only about 10 images are seen at any one time.
>>> I hide and show categories of images by setting a div container
>>> display:none/block or visibility:hidden/visible.
>>>
>>> Even though the images are cached on the client, when the page loads in[/color][/color]
> ie,[color=green][color=darkred]
>>> there is still a few seconds delay while it counts down until there are[/color][/color]
> no[color=green][color=darkred]
>>> items remaining.
>>> In firefox there is the same delay but instead of counting down it just[/color][/color]
> says[color=green][color=darkred]
>>> 'waiting for..'
>>>
>>> From what i understand, the way to get around this delay when loading is[/color][/color]
> not[color=green][color=darkred]
>>> to set the src of the image tags until later, when the images need to be
>>> viewed (using javascript).
>>> That's not a problem and i have tried it, and it works, but now (for[/color][/color]
> some[color=green][color=darkred]
>>> reason) the browser forgets that the images have been cached whenever[/color][/color]
> the[color=green][color=darkred]
>>> user returns to the site, and has to download the images from the[/color][/color]
> server,[color=green][color=darkred]
>>> the first time a particular category of images is viewed.
>>> This, i presume, is happening because the src attribute is no longer
>>> hard-coded in the source, and the browser cannot associate an entry in[/color][/color]
> the[color=green][color=darkred]
>>> cache with the src of an image that is set via javascript?
>>>
>>> So it looks like the only solution may be to generate the html on the[/color][/color]
> fly,[color=green][color=darkred]
>>> when it is needed, with the src intact, or to use frames to get the html
>>> when it is needed.
>>>
>>> Am i missing something here?
>>> Thanks.
>>>
>>>[/color]
>> you could try a css method for preloading?:
>>
>> http://www.ilovejackdaniels.com/css...mages-with-css/[/color]
>
> Thanks but wouldn't that just retain the delay when the page loads, which i
> am trying to avoid?
> What would be great is if display:none caused an image not to load until it
> was changed to display:block.
> Either that or if there was some way to set the src of an image using
> javascript and still have it cached
> when you return to the site.
>
>[/color]
not sure lol, sorry
mbstevens's Avatar
Guest - n/a Posts
#5: Re: many images delay even when cached

cosmic foo wrote:[color=blue]
> I have a page with about 100 images of about 10k each.[/color]

That's just short of a megabyte page -- huge!
Maybe 50 times the size a page should be.
[color=blue]
> where a typical img tag looks like this,
> <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> border="0">
> ...
> I hide and show categories of images by setting a div container
> display:none/block or visibility:hidden/visible.[/color]

....all of which means that anyone browsing in with javascript off
doesn't get to play. Maybe this will help:
http://www.mbstevens.com/howtothumb/
Even without seeing more of the source, what you're doing looks like
nightmare code to me -- but you should post the address so people can
look it over.
Tim's Avatar
Guest - n/a Posts
#6: Re: many images delay even when cached

On Tue, 26 Jul 2005 09:55:37 -0400, cosmic foo sent:
[color=blue]
> I have a page with about 100 images of about 10k each.
> where a typical img tag looks like this,
> <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> border="0">[/color]

I should imagine that along with what other people have already mentioned,
you'll fall afoul of the number of concurrent connections that a client
can make to a server. Servers have limits, so do the clients, and in some
cases the networking between (e.g. proxies).

What can happen is that only the first x connections succeed, and the rest
either wait longer before working, or they timeout while waiting. Then,
if someone reloads, they might go through the same thing again, *or* get
(some of) the remaining unloaded files.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please destroy some files yourself.

cosmic foo's Avatar
Guest - n/a Posts
#7: Re: many images delay even when cached


"mbstevens" <NOXwebmasterx@xmbstevensx.com> wrote in message
news:YtvFe.4793$0C.3214@newsread3.news.pas.earthli nk.net...[color=blue]
> cosmic foo wrote:[color=green]
> > I have a page with about 100 images of about 10k each.[/color]
>
> That's just short of a megabyte page -- huge!
> Maybe 50 times the size a page should be.
>[color=green]
> > where a typical img tag looks like this,
> > <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> > border="0">
> > ...
> > I hide and show categories of images by setting a div container
> > display:none/block or visibility:hidden/visible.[/color]
>
> ...all of which means that anyone browsing in with javascript off
> doesn't get to play. Maybe this will help:
> http://www.mbstevens.com/howtothumb/
> Even without seeing more of the source, what you're doing looks like
> nightmare code to me -- but you should post the address so people can
> look it over.[/color]

thanks for the link.
do you have javascript turned off?
how many people have javascript turned off?


cosmic foo's Avatar
Guest - n/a Posts
#8: Re: many images delay even when cached


"Tim" <tim@mail.localhost.invalid> wrote in message
news:pan.2005.07.26.23.59.52.341312@mail.localhost .invalid...[color=blue]
> On Tue, 26 Jul 2005 09:55:37 -0400, cosmic foo sent:
>[color=green]
> > I have a page with about 100 images of about 10k each.
> > where a typical img tag looks like this,
> > <img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> > border="0">[/color]
>
> I should imagine that along with what other people have already mentioned,
> you'll fall afoul of the number of concurrent connections that a client
> can make to a server. Servers have limits, so do the clients, and in some
> cases the networking between (e.g. proxies).
>
> What can happen is that only the first x connections succeed, and the rest
> either wait longer before working, or they timeout while waiting. Then,
> if someone reloads, they might go through the same thing again, *or* get
> (some of) the remaining unloaded files.
>
> --
> If you insist on e-mailing me, use the reply-to address (it's real but
> temporary). But please reply to the group, like you're supposed to.
>
> This message was sent without a virus, please destroy some files yourself.
>[/color]

thanks for the reply.


mbstevens's Avatar
Guest - n/a Posts
#9: Re: many images delay even when cached

cosmic foo wrote:[color=blue]
> "mbstevens" <NOXwebmasterx@xmbstevensx.com> wrote in message
> news:YtvFe.4793$0C.3214@newsread3.news.pas.earthli nk.net...
>[color=green]
>>cosmic foo wrote:
>>[color=darkred]
>>>I have a page with about 100 images of about 10k each.[/color]
>>
>>That's just short of a megabyte page -- huge!
>>Maybe 50 times the size a page should be.
>>
>>[color=darkred]
>>>where a typical img tag looks like this,
>>><img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
>>>border="0">
>>>...
>>>I hide and show categories of images by setting a div container
>>>display:none/block or visibility:hidden/visible.[/color]
>>
>>...all of which means that anyone browsing in with javascript off
>>doesn't get to play. Maybe this will help:
>>http://www.mbstevens.com/howtothumb/
>>Even without seeing more of the source, what you're doing looks like
>>nightmare code to me -- but you should post the address so people can
>>look it over.[/color]
>
>
> thanks for the link.
> do you have javascript turned off?
> how many people have javascript turned off?[/color]

More than you may imagine. People that are worried about
getting an infection often turn it off, as do people who are
just irritated by its antics, like popup windows.
People on PDAs. The text browser crowd. People behind some firewalls
(browsing while at work, for instance).

If you have
_any_
javascript navigation on a page, then you
_need_
redundant non-javascript navigation in a <noscript> section
to replace that navigation.

Don't worry, the <noscript> section will not even show up if the
visitor's javascript is turned on.



cosmic foo's Avatar
Guest - n/a Posts
#10: Re: many images delay even when cached


"mbstevens" <NOXwebmasterx@xmbstevensx.com> wrote in message
news:I7KFe.5734$Uk3.187@newsread1.news.pas.earthli nk.net...[color=blue]
> cosmic foo wrote:[color=green]
> > "mbstevens" <NOXwebmasterx@xmbstevensx.com> wrote in message
> > news:YtvFe.4793$0C.3214@newsread3.news.pas.earthli nk.net...
> >[color=darkred]
> >>cosmic foo wrote:
> >>
> >>>I have a page with about 100 images of about 10k each.
> >>
> >>That's just short of a megabyte page -- huge!
> >>Maybe 50 times the size a page should be.
> >>
> >>
> >>>where a typical img tag looks like this,
> >>><img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
> >>>border="0">
> >>>...
> >>>I hide and show categories of images by setting a div container
> >>>display:none/block or visibility:hidden/visible.
> >>
> >>...all of which means that anyone browsing in with javascript off
> >>doesn't get to play. Maybe this will help:
> >>http://www.mbstevens.com/howtothumb/
> >>Even without seeing more of the source, what you're doing looks like
> >>nightmare code to me -- but you should post the address so people can
> >>look it over.[/color]
> >
> >
> > thanks for the link.
> > do you have javascript turned off?
> > how many people have javascript turned off?[/color]
>
> More than you may imagine. People that are worried about
> getting an infection often turn it off, as do people who are
> just irritated by its antics, like popup windows.
> People on PDAs. The text browser crowd. People behind some firewalls
> (browsing while at work, for instance).
>
> If you have
> _any_
> javascript navigation on a page, then you
> _need_
> redundant non-javascript navigation in a <noscript> section
> to replace that navigation.
>
> Don't worry, the <noscript> section will not even show up if the
> visitor's javascript is turned on.
>
>
>[/color]

thanks, i'll keep that in mind


Dave Anderson's Avatar
Dave Anderson July 27th, 2005 01:45 PM
Guest - n/a Posts
#11: Re: many images delay even when cached

cosmic foo wrote:
[color=blue]
> how many people have javascript turned off?[/color]

According to <http://www.thecounter.com/stats/>, 5-10% of their visitors
have JavaScript turned off.

Dave

 
Not the answer you were looking for? Post your question . . .
196,813 members ready to help you find a solution.
Join Bytes.com

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 196,813 network members.
Post your question now . . .
It's fast and it's free

Popular Articles

Top Community Contributors