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/
