It is very annoying when you see a image is loading in a webpage:
Lots of website support this kind of effect to get rid of this. when the image is loading, it is displaying a “loading” effect, like this:
So how can we implement it to our website? The method is simple:
- Display a loading gif, and hide the image.
- After image loaded, hide gif, and display image.
We can use JQuery
load method here to add a callback to do the things in step 2 above.
Use this html:
1 2 3 4 5
It is written in coffeescript:
1 2 3 4 5 6 7 8 9 10
.loading_image, place a loader gif in front of it.
I set the image to opacity 0.0, so the image is downloading, and user will not see this image.
after image loaded, hide the gif, and show the image.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Very simple process, you can see the demo here.