Warning: Flying Images is built by myself, so I’ll be biased!

How Lazy Loading works?

A normal image is HTML looks like this:

<img src="sample.jpg" width="100%"/>

What lazy loading plugins do is rewrite the code to:

<img data-src="sample.jpg" width="100%"/>

As you noticed, the src attribute has been changed to data-src .

Since there is no src , the browser won’t download that image initially. Later a small JavaScript code checks whether the image is in the viewport (user viewing area) and if it’s inside data-src is changed back to src which trigger browser to download and display the image.

What is Native Lazy Loading?

Chrome has come with “native lazy loading”. You can read more about it here.

The advantage of native lazy loading is that there is no need for JavaScript and is generally much faster since it’s done “natively” by the browser.

The code looks like this:

<img src="sample.jpg" loading="lazy" width="100%"/>

What is Flying Images?

Flying Images is a high-performance lazy loading plugin. It uses the browser’s “native” lazy loading if available, otherwise, use normal JavaScript for lazy loading.

Flying Images can also load images even before images are in the viewport.

Are you afraid of lazy loading because it degrades user experience?

See the review from Gulshan Kumar:

How Flying Images is different from other lazy loading plugins?