Awesome
jekyll-loading-lazy ![](http://img.shields.io/liberapay/goal/gildesmarais.svg?logo=liberapa)
This plugin adds loading="lazy"
to all img
and iframe
tags on
your Jekyll site. No configuration needed.
If a loading
attribute is already present nothing is changed.
loading="lazy"
causes images and iframes to load lazily without any JavaScript.
Browser support is growing.
If a browser does not support the loading
attribute, it will load the resource
just like it would normally.
⭐ If you like it, star it or sponsor it. 💓
Installation
-
Add the following to your site's
Gemfile
:gem 'jekyll-loading-lazy'
-
add the following to your site's
_config.yml
:plugins: - jekyll-loading-lazy
Note: if
jekyll --version
is less than3.5
use:gems: - jekyll-loading-lazy
-
In your terminal, execute:
bundle
-
(re)start your Jekyll server with:
jekyll serve
Usage
Install the plugin as described above. That's basically all there is.
💡 Tip: Note that the github-pages
gem runs in safe
mode and only allows a defined set of plugins. To use this gem in GitHub Pages, you need to build your site locally or use a CI (e.g. Github Workflow) and deploy to your gh-pages
branch. Click here for more information.
Prevent lazy loading
In case you want to prevent loading some images/iframes lazily, add loading="eager"
to their tags. This might be useful to prevent flickering of images during navigation (e.g. the site's logo).
See the following examples to prevent lazy loading.
<details> <summary>Markdown example</summary>![an example](/image.jpg){:loading='eager'}
This example assumes you're using Kramdown (Jekyll is using it by default).
</details> <details> <summary>HTML example</summary><img src="/image.jpg" alt="an example" loading="eager" />
</details>
Contributing
- Fork this repository
- Create your branch (
git checkout -b feat/my-new-feature
) - Commit your changes (
git commit -m 'Add cool feature'
) - Push to the branch (git push origin feat/my-new-feature)
- Create a new Pull Request
Testing
rake
Credits
Thanks to @keithmifsud's
jekyll-target-blank
whereon this Jekyll plugin largely bases.