How to load image faster?

[Chamnap]

Hello,

I have several images that need to be loaded dynamically based on user
interaction. Each image size is about 6000x1500 pixels. I see several
sites they make the image blur, blur, blur, and the image become
clear. I want to know how to do this, or maybe you all have other
solutions better than this. Can anyone give me some suggestions and
the way how to implement?

Thanks
Chamnap

[David Mark]

"Chamnap" <ch***********@gmail.comwrote in message
news:11**********************@e16g2000pri.googlegr oups.com...

Hello,

I have several images that need to be loaded dynamically based on user
interaction. Each image size is about 6000x1500 pixels. I see several

Yikes. Are you sure you want to present images that size in one chunk?

sites they make the image blur, blur, blur, and the image become

No, they make the image grow, grow, grow on zooming in and shrink, shrink,
shrink on zooming out.

clear. I want to know how to do this, or maybe you all have other
solutions better than this. Can anyone give me some suggestions and
the way how to implement?

When the user clicks the "zoom in" button (or clicks an area of the image),
you preload the larger image and set an interval to enlarge the image a few
pixels at a time until it reaches the size of the larger image. Hopefully,
by that time, the larger image is cached and changing the src of the now
blurry original will magically sharpen it. If not, the effect is less
pleasing.

None of this has anything to do with making the image load faster, though
you can create perceived speed by preloading the larger image on page load.

[The Natural Philosopher]

Chamnap wrote:

Hello,

I have several images that need to be loaded dynamically based on user
interaction. Each image size is about 6000x1500 pixels. I see several
sites they make the image blur, blur, blur, and the image become
clear. I want to know how to do this, or maybe you all have other
solutions better than this. Can anyone give me some suggestions and
the way how to implement?

Thanks
Chamnap

No sure, but it may be because the images are stored interleaved..you
download successively higher res detail as time goes by.

However why you are using such big images when few computers will
display them in that size beats me..

why not resize them|?

Photoshop/photopaint is your friend.

[Evertjan.]

The Natural Philosopher wrote on 10 jul 2007 in comp.lang.javascript:

Chamnap wrote:

>Hello,

I have several images that need to be loaded dynamically based on user
interaction. Each image size is about 6000x1500 pixels. I see several
sites they make the image blur, blur, blur, and the image become
clear. I want to know how to do this, or maybe you all have other
solutions better than this. Can anyone give me some suggestions and
the way how to implement?

Thanks
Chamnap

No sure, but it may be because the images are stored interleaved..you
download successively higher res detail as time goes by.

However why you are using such big images when few computers will
display them in that size beats me..

why not resize them|?

I agree

Photoshop/photopaint is your friend.

Irfanview will do it nicely while you keep your money in your pocket.

<http://www.irfanview.net/>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Chamnap]

When the user clicks the "zoom in" button (or clicks an area of the image),

you preload the larger image and set an interval to enlarge the image a few
pixels at a time until it reaches the size of the larger image. Hopefully,
by that time, the larger image is cached and changing the src of the now
blurry original will magically sharpen it. If not, the effect is less
pleasing.

David Mark, can you show me how to implement this?

Chamnap

[David Mark]

"Chamnap" <ch***********@gmail.comwrote in message
news:11**********************@g37g2000prf.googlegr oups.com...

>When the user clicks the "zoom in" button (or clicks an area of the
image),
you preload the larger image and set an interval to enlarge the image a
few
pixels at a time until it reaches the size of the larger image.
Hopefully,
by that time, the larger image is cached and changing the src of the now
blurry original will magically sharpen it. If not, the effect is less
pleasing.

David Mark, can you show me how to implement this?

Yes, but you will have to do all the work as I can't give you the code I am
referring to and I don't know of any public examples to point you to. Start
with an image tag and a couple of links. As I mentioned, clicking the "zoom
in" link must preload the larger image and set an interval to enlarge the
original. It follows that you must set the original's overflow style to
auto (or hidden if you use a custom scrolling interface, but never mind that
at the moment.) I assume you know how to swap the image src when it reaches
the required dimensions. I also assume you understand that you must
preserve the aspect ratio of the image when sizing it. If I am wrong in
either of these assumptions, you aren't ready to write such an interface and
should explore alternate solutions (like breaking up the images.)

Let me know if you run into trouble...

>
Chamnap

[Chamnap]

Hi, David

I just find the web that has this functionality
http://picasaweb.google.co.uk/lh/sea...c=G&filter=1#0
Can you show me the way how to implement it?
Thanks
Chamnap

[David Mark]

"Chamnap" <ch***********@gmail.comwrote in message
news:11*********************@e9g2000prf.googlegrou ps.com...

Hi, David

I just find the web that has this functionality
http://picasaweb.google.co.uk/lh/sea...c=G&filter=1#0
Can you show me the way how to implement it?

That is a watered-down version of what I described before (doesn't have the
incremental zoom effect.) What part are you unclear about? It's an image
in a container (DIV most likely) that has its overflow style set to hidden.
When you click "zoom" it changes the size of the image. I suspect they are
using the onload event of a hidden image to update the source of the
original, which is not a good idea. I tried it in Opera (which doesn't
support onload for images properly) and sure enough I got this message:

"You are using a browser that is not fully supported. Some features may not
work too well, but you are welcome to have a look around."

They used a browser sniff to come to that conclusion (of course) and the
rest of the page was completely blank. (!) Google's JS developers are
absolutely awful. Whatever you do, don't take a page out of their book.

[ASM]

En réponse à David Mark qui nous a susurré, en date du : 19/07/07 4:39,
le message sibyllin suivant :

"Chamnap" <ch***********@gmail.comwrote in message
news:11*********************@e9g2000prf.googlegrou ps.com...

>Hi, David

I just find the web that has this functionality
http://picasaweb.google.co.uk/lh/sea...c=G&filter=1#0
Can you show me the way how to implement it?

I tried it in Opera (which doesn't
support onload for images properly)

really ?

<img src="asm1.gif" onload="alert(this.width+'\n'+this.height)" alt="" >

works fine in my Opera 9.0

--
Stephane Moriaux et son (moins) vieux Mac

[Chamnap]

Hi,

The part I don't know how to implement is: when they load the big
image or due to the Internet connection speed, it seems they load the
low-quality images first and when ready replace with the high-quality
image. How can they realize when to load low-quality and when to load
the high-quality when the Internet connection speed is high enough?
Thanks
Chamnap

[David Mark]

"Chamnap" <ch***********@gmail.comwrote in message
news:11**********************@x35g2000prf.googlegr oups.com...

Hi,

The part I don't know how to implement is: when they load the big
image or due to the Internet connection speed, it seems they load the
low-quality images first and when ready replace with the high-quality
image. How can they realize when to load low-quality and when to load
the high-quality when the Internet connection speed is high enough?

You lost me. Please quote the context of your reply. If I recall, the
example you posted loaded a small image first, regardless of connection
speed and then loaded a larger one when "zoom in" was clicked. Right?

[-Lost]

David Mark wrote:

"Chamnap" <ch***********@gmail.comwrote in message
news:11**********************@x35g2000prf.googlegr oups.com...

>Hi,

The part I don't know how to implement is: when they load the big
image or due to the Internet connection speed, it seems they load the
low-quality images first and when ready replace with the high-quality
image. How can they realize when to load low-quality and when to load
the high-quality when the Internet connection speed is high enough?

You lost me. Please quote the context of your reply. If I recall, the
example you posted loaded a small image first, regardless of connection
speed and then loaded a larger one when "zoom in" was clicked. Right?

This sounds like the difference between interlaced and non-interlaced
images. One downloads as if it were blurry, blurry, blurry, then fine.
The other appears in chunks, top-down.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.