{"id":16297065,"url":"https://github.com/alexjoverm/v-lazy-image","last_synced_at":"2025-05-15T19:08:37.593Z","repository":{"id":37611870,"uuid":"122930457","full_name":"alexjoverm/v-lazy-image","owner":"alexjoverm","description":"Lazy load images using Intersection Observer, apply progressive rendering and css animations.","archived":false,"fork":false,"pushed_at":"2024-07-17T11:14:17.000Z","size":27740,"stargazers_count":993,"open_issues_count":22,"forks_count":71,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-08T14:03:18.257Z","etag":null,"topics":["javascript","lazy-loading","vue","web-performance"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexjoverm.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":"2018-02-26T07:27:46.000Z","updated_at":"2025-05-07T09:50:23.000Z","dependencies_parsed_at":"2024-07-17T13:48:10.232Z","dependency_job_id":"942ee735-c286-414c-8041-bd6e47663e70","html_url":"https://github.com/alexjoverm/v-lazy-image","commit_stats":{"total_commits":77,"total_committers":17,"mean_commits":4.529411764705882,"dds":"0.22077922077922074","last_synced_commit":"7f8116a1626c95f45234db203c87ecf2589082f9"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjoverm%2Fv-lazy-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjoverm%2Fv-lazy-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjoverm%2Fv-lazy-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjoverm%2Fv-lazy-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexjoverm","download_url":"https://codeload.github.com/alexjoverm/v-lazy-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254404357,"owners_count":22065641,"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":["javascript","lazy-loading","vue","web-performance"],"created_at":"2024-10-10T20:24:50.807Z","updated_at":"2025-05-15T19:08:37.567Z","avatar_url":"https://github.com/alexjoverm.png","language":"JavaScript","funding_links":["https://paypal.me/AJoverMorales"],"categories":["JavaScript"],"sub_categories":[],"readme":"# v-lazy-image\n\n[![npm](https://img.shields.io/npm/v/v-lazy-image.svg)](https://www.npmjs.com/package/v-lazy-image)\n[![npm](https://img.shields.io/npm/dm/v-lazy-image.svg)](https://www.npmjs.com/package/v-lazy-image)\n[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/AJoverMorales)\n\nA Vue.js component to lazy load an image automatically when it enters the viewport using the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).\n\n\u003e ⚠️ Check the **[practical examples and demos](https://vuedose.tips/lazy-loading-images-with-v-lazy-image)** if you are creating a real-world or enterprise project and see how to **achieve max performance** using responsive images and progressive image loading.\n\n## Usage\n\n```bash\nnpm install v-lazy-image\n```\n\n_**Warning:** You'll need to install the [w3c Intersection Observer polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) in case you're targeting a browser which doesn't support it._\n\nFor **Vue 3**, import it and use it like any other component:\n\n```html\n\u003cscript setup\u003e\n  import VLazyImage from \"v-lazy-image\";\n\u003c/script\u003e\n```\n\nFor **Vue 2**, import it from `v-lazy-image/v2`:\n\n```js\nimport VLazyImage from \"v-lazy-image/v2\";\n\nexport default {\n  components: {\n    VLazyImage\n  }\n};\n```\n\nYou must pass an `src` property with the link of the image:\n\n```html\n\u003ctemplate\u003e\n  \u003cv-lazy-image src=\"http://lorempixel.com/400/200/\" /\u003e\n\u003c/template\u003e\n```\n\nThat easy, the image will be loaded as soon as it enters the viewport. **[See it running in this demo](https://vuedose.tips/lazy-loading-images-with-v-lazy-image)** and you'll learn how to use Chrome DevTools to check how it's loaded.\n\n## Achieving Max Performance\n\nJust by using `v-lazy-image` you'll have a performance gain, since the image will be loaded when it's going to be seen.\n\nBut you can go to the next level and squeeze your web's performance if you use the next techniques.\n\n### Responsive Images\n\n`v-lazy-image` allows you to use Web Standard's: the `srcset` attribute on images and the `\u003cpicture\u003e` tag.\n\n[\"Use Responsive Images with v-lazy-image\"](https://vuedose.tips/use-responsive-images-with-v-lazy-image) shows you how simple it is and see it in action in a demo.\n\n### Progressive Image Loading\n\nA technique used by platforms like Spotify, Netflix or Medium to improve Perceived Performance, thus the User Experience.\n\nIn [\"Achieve Max Performance loading your images with v-lazy-image\"](https://vuedose.tips/achieve-max-performance-loading-your-images-with-v-lazy-image) you'll see what's progressive image loading about, how to apply it in `v-lazy-image` using the `src-placeholder` attribute and a demo to see how it plays with a CSS animation.\n\n## API\n\nAside from the following API, you can pass any _img_ attribute, such as `alt`, and they'll be added to the rendered `\u003cimg\u003e` tag.\n\n_Fields marked as (\\*) are required._\n\n### Props\n\n| Name                   | Type          | Default    | Description                                                                                                                                               |\n| ---------------------- | ------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `src`                  | String _(\\*)_ | -          | Image `src` to lazy load when it intersects with the viewport                                                                                             |\n| `src-placeholder`      | String        | ' '        | If defined, it will be shown until the `src` image is loaded. \u003cbr\u003e Useful for progressive image loading, [see demo](https://codesandbox.io/s/9l3n6j5944)  |\n| `srcset`               | String        | -          | Images to be used for different resolutions                                                                                                               |\n| `intersection-options` | Object        | () =\u003e ({}) | The [Intersection Observer options object](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer). |\n| `use-picture`          | Boolean       | false      | Wrap the img in a picture tag.                                                                                                                            |\n\n### Events\n\n| Name        | Description                                                  |\n| ----------- | ------------------------------------------------------------ |\n| `intersect` | Triggered when the image intersects the viewport             |\n| `load`      | Triggered when the lazy image defined in `src` is loaded     |\n| `error`     | Triggered when the lazy image defined in `src` fails to load |\n\n\u003c!-- \n* [Simple demo](https://codesandbox.io/s/r5wmj970wm)\n* [Responsive images](https://codesandbox.io/s/k2kp64qkq7), by [@aarongarciah](https://twitter.com/aarongarciah)\n* [Progressive image loading with animations](https://codesandbox.io/s/9l3n6j5944), by [@aarongarciah](https://twitter.com/aarongarciah)\n* [Performant progressive blur using SVG](https://codesandbox.io/s/2ox0z4ymop)\n\n## Progressive Loading\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexjoverm%2Fv-lazy-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexjoverm%2Fv-lazy-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexjoverm%2Fv-lazy-image/lists"}