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
Since there is no
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 code looks like this:
<img src="sample.jpg" loading="lazy" width="100%"/>
What is Flying Images?
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?
- 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.
- 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.