How do you show pictures as fast as Facebook?

Can any of you help me to be able to show pictures as fast as facebook does!

Facebook is incredible to watch pictures at, because the pictures are kind 开发者_如何学Goof preloaded I think.

Often ved you view galleries on other sites, it is a pain in the a**, because it is so slow every time you change picture.

I think you need javascript to do it!?

Depending on your implementation, you could do this with some ajax and hidden dom elements.

Suppose you have a gallery with a slideshow.. You could insert a hidden dom element with the picture next picture of the slide show for each load. This would cause the image to be loaded. If you then were to use JS to insert that same image tag later, the browser would rely on it's cache rather than fetching it form the server since it already has that photo.

This is kind of a broad question but I think this approach would work. You would probally be better off not reinventing the wheel and seeing what Image prefetch librarbies based on JQuery or whatever are available to you..

Facebook compresses images to extremes. Try it yourself, take an image you are having trouble with and upload it to Facebook. Then check the size of the image, you will know why. Once I did a small test by uploading 17429 bytes image and it compressed it to 18757 bytes, a complete 7% increase from the original size!

At that compressed size, you can implement some sort of prefetch next image for display. Along with, I think, they have extremely good infrastructure.

Facebook uses Bigpipe, there is an open implementation in the works called openpipe

Bigpipe pushes the content to the browser when server stopped processing, so user will notice that it is faster.

It basically loads pagelets, when they are ready for the user, at the browser the implementation is Javascript based, and you must push the info to the client with your preferred server language.

First of all, facebook heavilycompresses images. Many other websites don't. Facebook also has a faster network than most other websites.

With the small image size, the client can prefetch the next image.

Preloaded would mean loading when the page is loaded, which is what happens with an <img> tag. No, it's simply because the file size is smaller.

If your wanting images to be viewed quicker on your site first make sure the images are decently compressed and aren't any bigger than they have to be. The amount of times I have seen websites using an extremely large image scaled down to fit in an element 5 times smaller is just ridiculous.

You can check out these sites that has many implementations and links on how to pre-load / pre-fetch images (css, JavaScript, ajax)

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

Since your question was tagged with 'jquery' here is one just for that.

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript