Flying Images is a high performance lazy loading plugin.

How does lazy loading work?

A normal HTML image looks like this:

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

Lazy loading plugins rewrite the code like this:

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

As you noticed,srcattribute has been changed todata-src.

Because nosrc, the browser does not initially load this image. Later, a little JavaScript code checks if the image is in the viewport (the user's viewport), and if it's inside,data-srcreturns to thatsrcwhich browser triggers the download and display of the image.

What is native lazy loading?

Chrome comes with "native lazy loading". You can read about it here.

Native lazy loading has the advantage that there is no need for JavaScript and is generally much faster since the browser does it "natively".

The code looks like this:

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

What are flying images?

Flying Images is a high performance lazy loading plugin. It uses the browser's "native" lazy loading if available, otherwise use regular JavaScript for lazy loading.

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

Are you afraid of lazy loading because it hurts the user experience?

How are flying images different from other lazy loading plugins?

• Uses built-in lazy loading - use built-in lazy loading if available (currently only supported in Chrome), otherwise use JavaScript to lazy load images.
• Load images before entering viewport - while other plugins load images when they are "inside" the viewport, flying images load them when they are about to enter the viewport.
• Tiny JavaScript - only 0.5 KB, compressed, reduced.
• If desired, you can use only native – want to support only Chrome? You can switch to "native only", which does not inject JavaScript.
• Rewrites all HTML code - never miss an image due to lazy loading (even if it's added by gallery plugins).
• Transparent filler - a tiny transparent base64 is added to all images. No more flickering when loading images.
• Exclude keywords - Almost all lazy loading plugins provide an exclusion feature, however flying images can also exclude images from the image parent node. Useful if your image doesn't have a class name.
• Supports browsers with IE and JavaScript disabled - all images are loaded instantly if it is Internet Explorer or even if JavaScript is completely disabled (usingno scripttag).