Skip to content

Add opt-in support for the native loading="lazy" attribute - #64

Open
bharat3645 wants to merge 3 commits into
jekyll:mainfrom
bharat3645:native-lazy-loading
Open

Add opt-in support for the native loading="lazy" attribute#64
bharat3645 wants to merge 3 commits into
jekyll:mainfrom
bharat3645:native-lazy-loading

Conversation

@bharat3645

Copy link
Copy Markdown

Closes #51

What

Adds an opt-in loading=lazy tag argument that renders the browser-native loading="lazy" attribute on the rendered <img>:

{% avatar hubot loading=lazy %}
<img class="avatar avatar-small" ... src="https://avatars3.githubusercontent.com/hubot?v=3&s=40" srcset="..." loading="lazy" />

Why

#51 asks for native lazy-loading support that keeps the regular src attribute. The existing lazy=true option empties src and moves the URL into data-src/data-srcset, which requires a JavaScript lazy-load plugin. This new option instead keeps src/srcset intact and adds loading="lazy", so images work with zero JS — exactly what the issue requests.

Behavior notes

  • Fully opt-in: default output is byte-for-byte unchanged.
  • The existing lazy=true behavior is untouched and takes precedence if both arguments are somehow passed.
  • Spec coverage added (native lazy loading context) mirroring the existing lazy loading spec; the new option is documented in the README.

Closes jekyll#51. Adds an opt-in `loading=lazy` tag argument that sets the
browser-native `loading="lazy"` attribute on the rendered `<img>` and
uses the regular `src`/`srcset` attributes (not `data-src`), as
requested in the issue. The existing `lazy=true` (JS-plugin-based,
`data-src`/`data-srcset`) behavior is untouched and takes precedence
if both are somehow present.

@benbalter benbalter left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Native lazyloading support

2 participants