afaf12
afaf12

Reputation: 5426

How to load images gracefully?

I want to know what are the ways to load images gracefully in a html website. I'm sure you know what I'm talking about. There is plenty of websites where images load slowly, slow down loading of the website core/content and make user experience really bad.

I found this while searching:

Javascript/jQuery preloader tutorial

Working example of above tutorial

However, this seems to be cosmetic, it doesn't actually pre-load anything and doesn't boost performance either. It simply displays a .gif until the image has fully loaded.

Upvotes: 2

Views: 844

Answers (2)

Naftali
Naftali

Reputation: 146310

It is called lazy loading.

There are a lot of results about it on google.

Upvotes: 5

Corey Ogburn
Corey Ogburn

Reputation: 24717

I've also seen websites where images first appear very croppy and their quality improves over a couple seconds. How is this done?

This happens when the images are interlaced. PNG files, among other types, can be interlaced.

Wikipedia Link for Interlacing

This is done when the image is created/saved.

Upvotes: 3

Related Questions