CODEWITHSUNDEEP
javascriptjquerycssimageimage-processing
John Doe
John Doe

Reputation: 3681

How can you change how pictures load on webpages? (e.g. lower resolution)

how can I change the way an image loads on a web page? I presume using javascript to do this. I'm looking for a way to have the picture load at a lower resolution and then get "sharper". As appose to loading downward, if that makes sense. Facebook does this with their "theater" picture pop-up window.

Upvotes: 2

Views: 218

Answers (3)

Mohammad Abu Halavi
Mohammad Abu Halavi

Reputation: 31

To do this you don't need javascript. It is actually part of how you saved your image. You should make your image with progressive option. It adds a little weight on the image, but it will show parts of image as it is loading.

To do this on Photoshop:

  1. Open your images file

  2. Choose File

  3. Choose Save for Web... option.

  4. On the opened Dialog select jpg

  5. On the upper right corner there are few options. Check 'Progressive' option

You are done!

Now replace your image and all the browser will show that image as they are loading it.

Upvotes: 1

mfeineis
mfeineis

Reputation: 2657

Sounds to me a lot like progressive loading in jpg images. That's something you have to adjust while creating the image. I'm only familiar with the gimp, there you have to check a checkbox while exporting to jpg. Check out this screenshot.

Another way to achieve this is to initially point the images on the webpage to smaller images and then do some stuff with some jQuery plugin. I'm not sure right now but I think there was one called jQuery.lazyload or sth. like that.

Hope it helps you!

Upvotes: 1

Godwin
Godwin

Reputation: 9937

This is actually due to the way that the image is encoded, namely images that are interlaced will have this effect.

http://en.wikipedia.org/wiki/Interlacing_(bitmaps)

Check to see if your image editing utility has this feature, applications such as photoshop definitely will but something as simple as paint won't.

Upvotes: 4

Related Questions