I did found "visibility: hidden" did stop an image loading on the first request, but if I hit refresh, or if I cleared the cache and went back to the page, it did load the image (I use httpfox). (unlike display none, which still loads the image) Was this your experience? Ideally I want a bulletproof way of not loading an image until javascript says so, and I want to be sure future browsers will not load the images (maybe IE9 will load visibility hidden images? I can't see any reason why it might change in the future)
On May 29, 6:19 am, Oskar Krawczyk <[email protected]> wrote: > Nope, by default it loads images on-demand- that is why we use pre- > loading! > > If an image is hidden or off screen, it'll not be requested from the > server. > > O. > > Sent from my iPhone > > On 28 May 2009, at 15:48, "asgaroth.belem" <[email protected]> > wrote: > > > > > Well I dont think this can be done, its like agains browser > > functionality. I mean if images are there its ebcause they should be > > requested > > > If you want to swaping then I dont know, I would do soemthing like > > ( just thiking ) > > > having a hrefs with the data? > > > width="100" height="100" alt="image > > description" > > > <a href="http://www...."; rel="{width:100, height:100, alt:'image > > description}" /> > > <a href="http://www...."; rel="{width:200, height:200, alt:'image > > description2}" /> > > > And having javascript create the IMG element once the thumb is clicked > > by getting the information from the href. > > > that way you have semi-organized HTML and no server requests. > > > On 27 mayo, 19:13, Matt Thomson <[email protected]> wrote: > >> It seems to me the two example above do not work by any inline > >> styling, but by adding a domready event that grabs the required > >> images > >> as an array, loops through them, grabs the src (in another array), > >> then sets the src to null, (or a blank gif etc). > > >> This way the browser does not load anything, as the src is '' or > >> null, > >> or it loads a blank gif. Then the real src array is in memory, to > >> load > >> the images when required, by resetting the src. > > >> If this is the case, I can see how it would work, although I think > >> JSON may be just as good, as setting an image src to '' or a blank > >> gif > >> doesn't seem like a "proper" scalable way to do it, but a bit more of > >> a hack. Thanks for the links though, I like to see how others have > >> approached the problem. > > >> On May 27, 11:32 pm, Oskar Krawczyk <[email protected]> wrote: > > >>> 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 Krawczykhttp://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.
