{"id":26273922,"url":"https://github.com/likuner/lazy-img","last_synced_at":"2026-05-17T13:38:08.610Z","repository":{"id":57682869,"uuid":"475481483","full_name":"likuner/LAZY-IMG","owner":"likuner","description":"a custom element of lazy-load-image based on web-components","archived":false,"fork":false,"pushed_at":"2022-07-10T09:23:49.000Z","size":606,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T15:16:34.865Z","etag":null,"topics":["custom-element","lazy-img","lazy-loading","shadow-dom","typescript","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@likun./lazy-img","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/likuner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-29T14:31:29.000Z","updated_at":"2022-07-11T11:05:58.000Z","dependencies_parsed_at":"2022-09-15T17:50:25.017Z","dependency_job_id":null,"html_url":"https://github.com/likuner/LAZY-IMG","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likuner%2FLAZY-IMG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likuner%2FLAZY-IMG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likuner%2FLAZY-IMG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likuner%2FLAZY-IMG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/likuner","download_url":"https://codeload.github.com/likuner/LAZY-IMG/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243551327,"owners_count":20309300,"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-element","lazy-img","lazy-loading","shadow-dom","typescript","web-components"],"created_at":"2025-03-14T09:17:18.425Z","updated_at":"2026-05-17T13:38:08.560Z","avatar_url":"https://github.com/likuner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\n`lazy-img`\n\n- a custom element of lazy-load-image based on web-components.\n- it can be used in both `vue` \u0026 `react` projects.\n- it can also be used in native `html`.\n# Installing 🛠\n## CDN\n\n- you can get `lazy-img` through CDN.\n- you can add `@+version` after `/lazy-img` if you need to load the specified version.\n```html\n\u003cscript src=\"https://unpkg.com/@likun./lazy-img/dist/index.js\"\u003e\u003c/script\u003e\n```\n## npm\n```\nnpm install @likun./lazy-img\n```\n## yarn\n```\nyarn add @likun./lazy-img\n```\n# Usage\n## Use in HTML\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003elazy-img\u003c/title\u003e\n  \u003cscript src=\"https://unpkg.com/@likun./lazy-img/dist/index.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003clazy-img src=\"image.png\" width=\"500\" height=\"300\" alt=\"lazy image\" /\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n## Use in Vue and React\n### Importing package\n```\nimport '@likun./lazy-img'\n```\n### Use in Vue\n\n- learn more: [Vue and Web Components](https://vuejs.org/guide/extras/web-components.html) and [🇨🇳中文](https://v3.cn.vuejs.org/guide/web-components.html).\n```vue\n\u003clazy-img\n  :src=\"imgSrc\"\n  width=\"50%\"\n  height=\"200px\"\n  @lazyload=\"handleLoad\"\n  @lazyerror=\"handleError\"\n/\u003e\n```\n### Use in React\n\n- learn more: [Using Web Components in React](https://reactjs.org/docs/web-components.html) and [🇨🇳中文](https://zh-hans.reactjs.org/docs/web-components.html).\n- **className** will be resolved to **classname**, but you can use `class` directly.\n- events triggered by web components may not be delivered correctly through the react rendering tree, you need to manually add event handlers in the react component to handle these events, the following example:\n```jsx\nimport { useState, useRef, useEffect } from 'react'\nimport styles from './LazyDemo.module.less'\n\nfunction LazyDemo() {\n  const lazyRef = useRef()\n  const [imgSrc] = useState('image.png')\n\n  useEffect(() =\u003e {\n    const handleLoad = () =\u003e {}\n    const handleError = (e) =\u003e {\n      // e.target.setAttribute('src', 'image1.png')\n    }\n    lazyRef.current.addEventListener('lazyload', handleLoad)\n    lazyRef.current.addEventListener('lazyerror', handleError)\n\n    return () =\u003e {\n      lazyRef.current.removeEventListener('lazyload', handleLoad)\n      lazyRef.current.removeEventListener('lazyerror', handleError)\n    }\n  }, [])\n\n  return (\n    \u003clazy-img\n      ref={lazyRef}\n      src={imgSrc}\n      width=\"300px\"\n      height=\"200px\"\n      // class can be used here\n      class={styles.lazyImage}\n    /\u003e\n  )\n}\n\nexport default LazyDemo\n```\n## Attributes\n| **Parameter** | **Explanation** | **Type** | **Defalut value** |\n| --- | --- | --- | --- |\n| src | url of image | string |  |\n| presrc | url of space occupying image when lazy | string |  |\n| width | width of image | number \u0026#124; string \u0026#124; percentage | 300px |\n| height | height of image | number \u0026#124; string \u0026#124; percentage | 200px |\n| alt | alternate text description of the image when failed | string |  |\n\n## Events\n| **Name** | **Explanation** | **Callback arguments** |\n| --- | --- | --- |\n| lazyload | triggered when image is loaded successfully | event |\n| lazyerror | triggered when image loading failed | event |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikuner%2Flazy-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flikuner%2Flazy-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikuner%2Flazy-img/lists"}