is there a preferred way to preload images when site uses jquery? how
do you usually preload images?
Aljosa Mohorovic
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Using the method below to preload images, I have a simple question:
The same variable (in this case 'img') is being used for all preloaded
images.
Img.src is used to tell the browser to make a call to the server to fetch
the image
What if the connection to the server is slow (or the image is lar
Here's what I use:
$(window).bind('load', function(){
var preload = [
'/images/assets/file/1.gif',
'/images/assets/file/2.gif',
'/images/assets/file/3.gif'
];
$(document.createElement('img')).bind('load', function(){
if(preload[0]) this.src = preload.shift();
making all the requests and at the top mimics the normal image load ... the
only case where sequencing might help is when the server is configured
strangely , or just can't handle the requests... (as in thousands of large
graphics??).
But I do like the technique! Does that actually load , wait an
Ⓙⓐⓚⓔ wrote:
> making all the requests and at the top mimics the normal image load ...
> the only case where sequencing might help is when the server is
> configured strangely , or just can't handle the requests... (as in
> thousands of large graphics??).
The page I wrote that snippet for was a
Luke Lutman schrieb:
> Ⓙⓐⓚⓔ wrote:
> > making all the requests and at the top mimics the normal image load ...
> > the only case where sequencing might help is when the server is
> > configured strangely , or just can't handle the requests... (as in
> > thousands of large graphics??).
>
> The
Luke , I don't think that's true... although it's really hard to tell. I
know I can do lots of ajaxing at the same time! I wonder if ajaxing the
images would keep them in the cache for later use??
On 2/5/07, Klaus Hartl <[EMAIL PROTECTED]> wrote:
Luke Lutman schrieb:
> Ⓙⓐⓚⓔ wrote:
> > making
large images vs tiny mouseover images sure makes a difference!
I guess we could use your method for all... but I like the idea of getting
my little mouseover/active images quickly.
I love the brevity of your solution!!
$(document.createElement('img')).bind('load', function(){
if(preload[0]) t
so the load handler is very special... I didn't know about it! just loading
anything calls the load hander! brilliant!
On 2/5/07, Luke Lutman <[EMAIL PROTECTED]> wrote:
Ⓙⓐⓚⓔ wrote:
> I love the brevity of your solution!!
> $(document.createElement('img')).bind('load', function(){
>if(prel
Ⓙⓐⓚⓔ wrote:
> I love the brevity of your solution!!
> $(document.createElement('img')).bind('load', function(){
>if(preload[0]) this.src = preload.shift();
> }).trigger('load');
Thanks ;-)
It works because the onload handler gets reused -- it fires after the
image finishes loading, which
Ⓙⓐⓚⓔ schrieb:
> Luke , I don't think that's true... although it's really hard to tell. I
> know I can do lots of ajaxing at the same time! I wonder if ajaxing the
> images would keep them in the cache for later use??
Well, you do not necessarily have to believe me, but it's even part of
the HTT
I stand corrected! I've seen multiple ajax requests perhaps they were
getting done 2 at a time! good to know!
On 2/5/07, Klaus Hartl <[EMAIL PROTECTED]> wrote:
Ⓙⓐⓚⓔ schrieb:
> Luke , I don't think that's true... although it's really hard to tell. I
> know I can do lots of ajaxing at the sam
I checked my firefox about:config for the connections I had goosed mine
up to 8.
On 2/5/07, Ⓙⓐⓚⓔ <[EMAIL PROTECTED]> wrote:
I stand corrected! I've seen multiple ajax requests perhaps they were
getting done 2 at a time! good to know!
On 2/5/07, Klaus Hartl < [EMAIL PROTECTED]> wrote:
Luke, this is a great technique - thanks!
As far as my original question, I am still curious to find out the
following:
With the following preload function:
$.preloadImages = function()
{
for(var i = 0; i
> Here's what I use:
>
> $(window).bind('load', function(){
>var preload =
Ok, did a quick test in FF and Safari :-)
- The function doesn't wait, it makes all the requests at once (more or less).
- The variable gets overwritten.
- It doesn't interrupt the download.
One thing I did find was that if I do:
var img = new Image();
img.onload = function(){
var that = th
Thanks for testing this.
I guess that means that although the variable gets overwritten, the image
object remains in memory and the browser's http connection (that is pulling
down the current image) remains active until the image is loaded. So
basically the image object stays alive, but there is
TECTED]
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of PragueExpat
> Sent: Tuesday, February 06, 2007 8:50 AM
> To: discuss@jquery.com
> Subject: Re: [jQuery] image preloading
>
>
> Thanks for testing this.
>
> I guess tha
sts to be dropped.
>
> --->Nathan
>
>
>
> .:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:
> ||:.
>
> Nathan Young
> Cisco.com->Interface Development
> A: ncy1717
> E: [EMAIL PROTECTED]
>
>> -Original Message-
>> From: [EMAIL PROTECTED]
>> [mailto:[EMAIL PROTECTED] On Behalf Of PragueExpat
Perhaps you could use something like this:
$.preloadImages = function()
{
for(var i = 0; i wrote:
> is there a preferred way to preload images when site uses jquery? how
> do you usually preload images?
>
> Aljosa Mohorovic
>
> ___
> jQuery maili
It would be nice to have this running in the background on a thickbox-esque
page, so that, while the user is admiring picture A, picture B is happily
loading away in the background.
Sam Collett wrote:
>
> Perhaps you could use something like this:
>
> $.preloadImages = function()
> {
> f
Sam Collett schrieb:
> Perhaps you could use something like this:
>
> $.preloadImages = function()
> {
> for(var i = 0; i {
> img = new Image();
> img.src = arguments[i];
> }
> }
>
> Then you call it as soon as possible (it doesn't have to be in
> $
you get more mileage from the tcp/ip connection when you make all
requests at the same time.
On 9/28/06, Dan Atkinson <[EMAIL PROTECTED]> wrote:
>
> It would be nice to have this running in the background on a thickbox-esque
> page, so that, while the user is admiring picture A, picture B is happi
22 matches
Mail list logo
