If you dont really wanna load an image, dont put it on the src attribute. If there is no place else where you can store the link to the image, you can put it on a separate attribute, which wont validate on xhtml strict but will validate on html transitional.
<img other_attribute_than_src="http://example.com/myimage.png"; src="" /> Then, with JS, get the url and put it on the src. Of course, once you do that, the image will start loading and it will take time. To me, this is ugly, but will work for you :) Ideally, you will have only one img tag to show all the big images, changing the src when you click on the thumbs.... On Thu, May 28, 2009 at 8:47 PM, Matt Thomson <[email protected]> wrote: > > 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. >
![http://example.com/myimage.png"](http://example.com/myimage.png"){kind=link}