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.
