Well, doesn't work for you, but it works for me (as I've explained above_. Please take a look at the link provided, run Firebug (turn ON the cache), you'll see 5 images are being loaded, asynchronously. The way I'm preventing them to load initially is by hiding them. This is essentially lazy-loading them.
http://blog.olicio.us/public/weblog/MooImagePreload/ O. __ Oskar Krawczyk http://nouincolor.com On Wed, May 27, 2009 at 12:16, Matt Thomson <[email protected]> wrote: > > As I said in my first post: > > "I don't want 50 big images to load > right away, and "display: none" does not stop the browser from > requesting them from the server. " > > This happens in all browsers. > > > > On May 27, 10:35 pm, Oskar Krawczyk <[email protected]> wrote: > > Using fake filenames is a really bad idea as it'll throw a 404 while > > requesting the file, ergo a slower response time. > > > > What I usually do (http://blog.olicio.us/public/weblog/ > > MooImagePreload/) is put a inline style, like "visibility: hidden" > > which forces the user-agent not to load the images but put IMG > > placeholders instead (rememer to turn ON your cache before testing > > this solution). Then, remove the styles when needed. > > > > Oskar > > > > Sent from my iPhone > > > > On 27 May 2009, at 05:29, "Steve Onnis" <[email protected]> wrote: > > > > > > > > > You could always do something sneeky like put an underscore in front > > > of the > > > actual src value like.. > > > > > src="_myImage.jpg" > > > > > Then ammend the src value with javascript to load the image with the > > > click > > > > > -----Original Message----- > > > From: [email protected] > > > [mailto:[email protected]] On Behalf Of Matt Thomson > > > Sent: Wednesday, 27 May 2009 1:56 PM > > > To: MooTools Users > > > Subject: [Moo] Putting the images in the html, but stopping the > > > browser from > > > requesting them? > > > > > I have a photo gallery that will display about 50 thumbnails. When > > > thumbnail #1 is clicked, big image number 1 is displayed and so on... > > > > > Ideally I would like to put all the thumbs in one div (as <img > > > src="..), and all the big images in another div (as <img src=".. > > > style="display; none" />) > > > > > Then I could (with mootools) grab all the big images as an array > > > (getElements), grab the thumbs as an array, and do an each loop > > > through the thumbs. So if thumbsImageArray[index] is clicked on, > > > bigImageArray[index] is shown. > > > > > All pretty simple, except that I don't want 50 big images to load > > > right away, and "display: none" does not stop the browser from > > > requesting them from the server. > > > > > I am thinking I may have to make a seperate json bit, and load all the > > > big image info (src, width,height) as arrays/objects, then access > > > these arrays with the mootools. This would work, but ideally I would > > > love to have all my data nice and cleanly put in the HTML, do a > > > getElements, do an each loop, sorted. > > > > > Does anyone know of a way to stop the browser requesting the image, > > > and still having the correct src in the html. I don't want an > > > incorrect src, as it will result in 50 unnesscessary server calls. > > > > > Thanks, > > > > > Matt. >
