{"id":15376722,"url":"https://github.com/bennypowers/lazy-image","last_synced_at":"2025-04-14T06:44:10.451Z","repository":{"id":30819377,"uuid":"125265929","full_name":"bennypowers/lazy-image","owner":"bennypowers","description":"Lazily load your images with \u003clazy-image\u003e custom element","archived":false,"fork":false,"pushed_at":"2024-02-22T04:27:52.000Z","size":792,"stargazers_count":48,"open_issues_count":4,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T20:23:51.286Z","etag":null,"topics":["custom-elements","hacktoberfest","html","lazy-loading","performance","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bennypowers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["bennypowers"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"custom":null}},"created_at":"2018-03-14T19:51:02.000Z","updated_at":"2024-12-08T05:27:15.000Z","dependencies_parsed_at":"2024-06-18T22:47:11.265Z","dependency_job_id":"dde4d9ff-9140-400d-9063-d1521b58a419","html_url":"https://github.com/bennypowers/lazy-image","commit_stats":{"total_commits":66,"total_committers":10,"mean_commits":6.6,"dds":0.3484848484848485,"last_synced_commit":"6cd7b09774508b068e2a06917c294e17a92ec031"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Flazy-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Flazy-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Flazy-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Flazy-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bennypowers","download_url":"https://codeload.github.com/bennypowers/lazy-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837264,"owners_count":21169373,"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":["custom-elements","hacktoberfest","html","lazy-loading","performance","webcomponents"],"created_at":"2024-10-01T14:08:47.742Z","updated_at":"2025-04-14T06:44:10.420Z","avatar_url":"https://github.com/bennypowers.png","language":"HTML","funding_links":["https://github.com/sponsors/bennypowers"],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@power-elements/lazy-image)\n[![npm (scoped)](https://img.shields.io/npm/v/@cycle/core.svg)](https://www.npmjs.com/package/@power-elements/lazy-image)\n[![Build Status](https://travis-ci.org/bennypowers/lazy-image.svg?branch=master)](https://travis-ci.org/bennypowers/lazy-image)\n[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github\u0026utm_medium=button\u0026utm_term=bennyp\u0026utm_campaign=github)\n\n# \u003clazy-image\\\u003e\n\n[Lazily load](https://web.dev/lazy-loading-images/) your images!\n\n## 🚛 Get it!\n```\nnpm i -S @power-elements/lazy-image\n```\n\n## 📦 Load it!\n```html\n\u003c!-- From CDN --\u003e\n\u003cscript async type=\"module\" src=\"https://unpkg.com/@power-elements/lazy-image/lazy-image.js\"\u003e\u003c/script\u003e\n\n\u003c!-- From local installation --\u003e\n\u003cscript async type=\"module\" src=\"/node_modules/@power-elements/lazy-image/lazy-image.js\"\u003e\u003c/script\u003e\n\n\u003c!-- In a Module --\u003e\n\u003cscript type=\"module\"\u003e\n  import '/node_modules/@power-elements/lazy-image/lazy-image.js';\n  // ...\n\u003c/script\u003e\n```\n\n## 💪 Use it!\n```html\n\u003clazy-image src=\"image.jpg\" alt=\"Lazy Image\"\u003e\n  \u003csvg slot=\"placeholder\"\u003e\u003cuse xlink:href=\"#placeholder-svg\"\u003e\u003c/use\u003e\u003c/svg\u003e\n\u003c/lazy-image\u003e\n```\n\nThe optional placeholder could be any element. Inline \u003cabbr title=\"Scalable Vector Graphics\"\u003eSVG\u003c/abbr\u003e, Pure \u003cabbr title=\"Cascading Style Sheets\"\u003eCSS\u003c/abbr\u003e graphics, or an `\u003cimg src=\"data:foo\"/\u003e` would work best.\n\n## 💄 Style it!\nYou should give your `\u003clazy-image\u003e` elements some specific dimensions, since it absolutely positions its shadow children. In most cases, you should set the wrapping element as well as the `--lazy-image-` custom properties to the known display dimensions of your image.\n\n```html\n\u003cstyle\u003e\nhtml {\n  --lazy-image-width: 640px;\n  --lazy-image-height: 480px;\n}\n\nlazy-image {\n  width: var(--lazy-image-width);\n  height: var(--lazy-image-height);\n}\n\u003c/style\u003e\n\n\u003clazy-image src=\"https://fillmurray.com/640/480\"\u003e\u003c/lazy-image\u003e\n```\n\n`\u003clazy-image\u003e` exposes a set of custom properties for your customizing delight:\n\nProperty|Purpose|Default\n-----|-----|-----\n`--lazy-image-width`|Width of the internal image and placeholder elements|100%\n`--lazy-image-height`|Height of the internal image and placeholder elements|100%\n`--lazy-image-fit`|[`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property of the internal image and placeholder elements|contain\n`--lazy-image-fade-duration`|Duration of the fade in from the placeholder to the image. Set to 0 to disable fading.|0.3s\n`--lazy-image-fade-easing`|[`ease`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) property of the opacity transition for the image and placeholder|ease\n\n### Browser support\n`lazy-image` manages the loading of your images via an Intersection Observer. In browsers where an Intersection Observer is not present, your images will be loaded immediately much like standard `\u003cimg/\u003e` elements. Conditionally delivering the [IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) along with your `lazy-image`s to your users will ensure that all users experience the benefits of loading images lazily. Stay lazy, friend!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennypowers%2Flazy-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbennypowers%2Flazy-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennypowers%2Flazy-image/lists"}