Ⓙⓐⓚⓔ 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 an image gallery (about full size image, plus thumbnails). The thumbnails and one image are visible when the page loads, and the other full-size images are shown when you click on the corresponding thumbnail. If I preloaded the 29 hidden full-size images on document ready, the page felt reeeeaaaalllly slow because it loaded all the hidden images before loading the ones that were visible! As far as the server benefits, imagine the page above being loaded by 30 users at the same time. Preloading the images sequentially only takes up 30 connections at any given time. Preloading them all at once could take up 870 connections! It might not make much difference, but it doesn't hurt, either ;-) > But I do like the technique! Does that actually load , wait and repeat? > and you don't have to re-trigger? Yep, you got it :-) Luke > On 2/5/07, *Luke Lutman* < [EMAIL PROTECTED] <mailto:[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] > <mailto:[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 <mailto:discuss@jquery.com> > >>> http://jquery.com/discuss/ > >>> > >> _______________________________________________ > >> jQuery mailing list > >> discuss@jquery.com <mailto:discuss@jquery.com> > >> http://jquery.com/discuss/ > >> > >> > > > > > -- > zinc Roe Design > www.zincroe.com <http://www.zincroe.com> > (647) 477-6016 > > _______________________________________________ > jQuery mailing list > discuss@jquery.com <mailto: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/
