Extensible Lazy Image

[bennypowers]

Proposed on Slack

Lazy image is fairly straightforward to implement. It would be nice to have an extensible version which provides the basic behaviour but can be lazily enhanced.

see https://github.com/bennypowers/lazy-image

[admwx7]

Premise

An element that can trigger an action on it's primary content once scrolling into view, then display a placeholder (optional) until the primary content resolves loading.

Notes

• Load event would have to be optional as not all content types would utilize the load event, so an override for a different event might be useful.
• We will need a fallback to always display once in view for content that doesn't rely on async requests, though not completely sure why you would use that. Maybe completely expose the trigger so you can swap out relying on events for a callback even?

Usage

<lazy-element>
  <img src="foo.svg" />
</lazy-element>

<lazy-element>
  <my-api-content></my-api-content>
</lazy-element>

<lazy-element>
  <video src="foo.mov" />
</lazy-element>

Dependencies

• Intersection Observer
• TypeScript
• Shadow DOM

Build Targets

• TypeScript (source)
• ES6
• ES5

[stramel]

I have previously looked into tackling a declarative IntersectionObserver essentially. I think this would be very useful but definitely has some challenges.

We will have to require a template to prevent loading of the children. Here is a quick PoC that I threw together a while ago and updated with template. https://gist.github.com/stramel/8b8f68dd7a0e1839f71bd259069fd172