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 and repeat? and
you don't have to re-trigger?


On 2/5/07, Luke Lutman <[EMAIL PROTECTED]> wrote:

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();
   }).trigger('load');
});

This loads the images sequentially, so you don't have to worry
interrupting one image with
another. It's much nicer to your server too, because there won't be a
barrage of image requests
all at once.

I'd also suggest waiting to start preloading until the page has finished
loading. Right now,
you're preloading at the same time the page is loading, which will make
the page feel slow
(especially if you're preloading a lot of images).

Cheers,
Luke

PragueExpat wrote:
> 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 large) -
does
> the script wait until the image is loaded before continuing or is there
a
> chance that the variable will be overwritten (because of the loop) and
its
> source set to the next image before the first image is fully downloaded?
>
> I use this script and it works fine, but I would like to find out if a
> potentially slow client might have different results.
>
> Thanks.
>
>
> Sam Collett wrote:
>> Perhaps you could use something like this:
>>
>> $.preloadImages = function()
>> {
>>      for(var i = 0; i<arguments.length; i++)
>>      {
>>              img = new Image();
>>              img.src = arguments[i];
>>      }
>> }
>>
>> Then you call it as soon as possible (it doesn't have to be in
>> $(document).ready):
>>
>> $.preloadImages("foo.gif", "bar.gif");
>> $(document).ready(function() { ... });
>>
>> On 28/09/06, Aljosa Mohorovic <[EMAIL PROTECTED]> wrote:
>>> 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/
>>>
>> _______________________________________________
>> jQuery mailing list
>> discuss@jquery.com
>> http://jquery.com/discuss/
>>
>>
>


--
zinc Roe Design
www.zincroe.com
(647) 477-6016

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/




--
Ⓙⓐⓚⓔ - יעקב   ʝǡǩȩ   ᎫᎪᏦᎬ
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to