https://github.com/webreflection/with-preview

An <img> built-in extend that loads its non-preview counterpart once visible
https://github.com/webreflection/with-preview

Last synced: over 1 year ago
JSON representation

An <img> built-in extend that loads its non-preview counterpart once visible

• Host: GitHub
• URL: https://github.com/webreflection/with-preview
• Owner: WebReflection
• License: isc
• Created: 2020-05-03T12:31:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-04T15:45:35.000Z (over 6 years ago)
• Last Synced: 2024-12-31T15:33:21.612Z (over 1 year ago)
• Language: JavaScript
• Size: 501 KB
• Stars: 34
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# with-preview

![frozen beach](./test/with-preview.jpg)

**Photo by [Pierre Bouillot](https://unsplash.com/@pbouillot) on [Unsplash](https://unsplash.com/)**

A built-in Custom Element based on _IntersectionObserver_ able to fade in good quality jpg over their preview version.

It fallbacks all the way down to IE 9, simply replacing on the fly the preview source with its good quality counter-part.

**[Live demo](https://webreflection.github.io/with-preview/test/)**

### Example

```html



```

Images will drop the `.preview` part of the _src_ and will fade in the non `.preview` version of the same image once the document shows the preview, and after the non-preview version is loaded.

Previews can be manually generated or based on [µcompress](https://github.com/WebReflection/ucompress#readme) or [µcdn](https://github.com/WebReflection/ucdn#readme) previews.

```sh

# example: will create test.preview.jpg

npx ucompress --preview --source test.jpg

```