Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gildesmarais/jekyll-loading-lazy
🧙🏽♀️ Automatically adds loading="lazy" to <img> and <iframe> tags. Load images on your sites lazily without JavaScript.
https://github.com/gildesmarais/jekyll-loading-lazy
iframe iframes image img jekyll jekyll-plugin lazy lazy-load lazy-load-img lazy-loading lazyload lazyload-images lazyloading loading loading-lazy native pagespeed performance webperformance webvitals
Last synced: 27 days ago
JSON representation
🧙🏽♀️ Automatically adds loading="lazy" to <img> and <iframe> tags. Load images on your sites lazily without JavaScript.
- Host: GitHub
- URL: https://github.com/gildesmarais/jekyll-loading-lazy
- Owner: gildesmarais
- License: mit
- Created: 2020-04-16T19:20:10.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T12:39:39.000Z (over 2 years ago)
- Last Synced: 2024-05-01T21:14:40.781Z (2 months ago)
- Topics: iframe, iframes, image, img, jekyll, jekyll-plugin, lazy, lazy-load, lazy-load-img, lazy-loading, lazyload, lazyload-images, lazyloading, loading, loading-lazy, native, pagespeed, performance, webperformance, webvitals
- Language: Ruby
- Homepage:
- Size: 37.1 KB
- Stars: 58
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Lists
- awesome-jekyll-plugins - **Loading Lazy** - loading-lazy](https://rubygems.org/gems/jekyll-loading-lazy)) -- Adds `loading="lazy"` to lazily load your images and iframes without the need for JavaScript. (Images & Pictures)
- awesome-stars - gildesmarais/jekyll-loading-lazy - 🧙🏽♀️ Automatically adds loading="lazy" to <img> and <iframe> tags. Load images on your sites lazily without JavaScript. (Ruby)
- jekyll-spaceship - jekyll-loading-lazy - Automatically adds loading="lazy" to img and iframe tags to natively load lazily. (Credits / 9. Modifying Element Usage)
README
# jekyll-loading-lazy [](https://liberapay.com/gildesmarais/donate)
This plugin adds `loading="lazy"` to all `img` and `iframe` tags on
your [Jekyll site](https://jekyllrb.com/). 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](https://caniuse.com/#feat=loading-lazy-attr) 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](https://liberapay.com/gildesmarais/donate). 💓
## Installation
1. Add the following to your site's `Gemfile`:
```ruby
gem 'jekyll-loading-lazy'
```
2. add the following to your site's `_config.yml`:
```yml
plugins:
- jekyll-loading-lazy
```
**Note**: if `jekyll --version` is less than `3.5` use:
```yml
gems:
- jekyll-loading-lazy
```
3. In your terminal, execute:
```bash
bundle
```
4. (re)start your Jekyll server with:
```bash
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](https://pages.github.com/versions/). To use this gem in GitHub Pages, you need to build your site locally or use a CI (e.g. [Github Workflow](https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow)) and deploy to your `gh-pages` branch. [Click here for more information.](https://jekyllrb.com/docs/continuous-integration/github-actions/)
### 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.
Markdown example
```markdown
{:loading='eager'}
```
This example assumes you're using Kramdown (Jekyll is using it by default).
HTML example
```html
```
## Contributing
1. [Fork this repository](https://github.com/gildesmarais/jekyll-loading-lazy/fork)
2. Create your branch (`git checkout -b feat/my-new-feature`)
3. Commit your changes (`git commit -m 'Add cool feature'`)
4. Push to the branch (git push origin feat/my-new-feature)
5. Create a new Pull Request
### Testing
```bash
rake
```
## Credits
Thanks to @keithmifsud's
[`jekyll-target-blank`](https://github.com/keithmifsud/jekyll-target-blank)
whereon this Jekyll plugin largely bases.