{"id":20514031,"url":"https://github.com/webreflection/with-preview","last_synced_at":"2025-04-14T00:05:55.524Z","repository":{"id":65993309,"uuid":"260911940","full_name":"WebReflection/with-preview","owner":"WebReflection","description":"An \u003cimg\u003e built-in extend that loads its non-preview counterpart once visible","archived":false,"fork":false,"pushed_at":"2020-05-04T15:45:35.000Z","size":513,"stargazers_count":34,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-31T15:33:21.612Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-03T12:31:44.000Z","updated_at":"2024-09-02T13:19:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"55fcdd06-df1c-4d7b-978b-bb793653481b","html_url":"https://github.com/WebReflection/with-preview","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fwith-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fwith-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fwith-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fwith-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/with-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232797486,"owners_count":18577981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T21:14:28.011Z","updated_at":"2025-01-06T23:11:46.110Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-preview\n\n![frozen beach](./test/with-preview.jpg)\n\n\u003csup\u003e**Photo by [Pierre Bouillot](https://unsplash.com/@pbouillot) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\nA built-in Custom Element based on _IntersectionObserver_ able to fade in good quality jpg over their preview version.\n\nIt fallbacks all the way down to IE 9, simply replacing on the fly the preview source with its good quality counter-part.\n\n**[Live demo](https://webreflection.github.io/with-preview/test/)**\n\n\n### Example\n\n```html\n\u003cscript async src=\"https://unpkg.com/with-preview/es.js\"\u003e\u003c/script\u003e\n\u003cimg is=\"with-preview\" src=\"any-image.preview.jpg\"\u003e\n```\n\nImages 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.\n\nPreviews can be manually generated or based on [µcompress](https://github.com/WebReflection/ucompress#readme) or [µcdn](https://github.com/WebReflection/ucdn#readme) previews.\n\n```sh\n# example: will create test.preview.jpg\nnpx ucompress --preview --source test.jpg\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fwith-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fwith-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fwith-preview/lists"}