Flying Images – A High-Performance Lazy Loading Plugin

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?

• Uses native lazy loading – Use native lazy loading if available (currently supported only in Chrome), otherwise use JavaScript to lazy load images.
• Load images even before entering viewport – While other plugins load images when they’re ‘inside’ the viewport, Flying Images load them when they’re about to enter the viewport.
• Tiny JavaScript – Only 0.5KB, gzipped, minified.
• Optionally use native only – Only want to support Chrome? You can switch to “native only” which injects zero JavaScript.
• Rewrites entire HTML – Never miss an image from lazy loading (even the ones injected by gallery plugins).
• Transparent placeholder – A tiny base64 transparent is added to all images. No more flickering while loading images.
• Exclude keywords – Almost all lazy loading plugins provide exclude feature, however, Flying Images can also exclude images from the images’ parent node. Helpful if your image doesn’t have a class name.
• Supports IE and JavaScript disabled browsers – All images are loaded instantly if is Internet Explorer or even if JavaScript is entirely disabled (using noscript tag).