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<arguments.length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
does the browser completely download each image before the script changes
the source and begins the next download or is/can the image download be
interrupted by the variable being reassigned?
Anyone?
Luke Lutman 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
>>>> [email protected]
>>>> http://jquery.com/discuss/
>>>>
>>> _______________________________________________
>>> jQuery mailing list
>>> [email protected]
>>> http://jquery.com/discuss/
>>>
>>>
>>
>
>
> --
> zinc Roe Design
> www.zincroe.com
> (647) 477-6016
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/image-preloading-tf2351203.html#a8825812
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
