{"id":24499652,"url":"https://github.com/codewithkyle/lazy-loader","last_synced_at":"2026-03-11T05:31:16.034Z","repository":{"id":111440784,"uuid":"352350095","full_name":"codewithkyle/lazy-loader","owner":"codewithkyle","description":"A lightweight Web Component based lazy loading library.","archived":false,"fork":false,"pushed_at":"2024-03-07T22:34:51.000Z","size":36,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T13:07:56.097Z","etag":null,"topics":["defer-loading","lazy-loading","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@codewithkyle/lazy-loader","language":"TypeScript","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/codewithkyle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2021-03-28T14:23:53.000Z","updated_at":"2025-03-21T02:10:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"6a3dc3fa-17c7-4e90-acc2-83031030893b","html_url":"https://github.com/codewithkyle/lazy-loader","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/codewithkyle/lazy-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Flazy-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Flazy-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Flazy-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Flazy-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithkyle","download_url":"https://codeload.github.com/codewithkyle/lazy-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Flazy-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30372166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"online","status_checked_at":"2026-03-11T02:00:07.027Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["defer-loading","lazy-loading","web-components"],"created_at":"2025-01-21T22:15:11.908Z","updated_at":"2026-03-11T05:31:16.015Z","avatar_url":"https://github.com/codewithkyle.png","language":"TypeScript","readme":"# Lazy Loader\n\nA lightweight (~2kb) Web Component based lazy loading library.\n\n## Install\n\nInstall via NPM:\n\n```bash\nnpm i -S @codewithkyle/lazy-loader\n```\n\nOr via CDN:\n\n```javascript\nimport { configure, update, mount, css } from \"https://cdn.jsdelivr.net/npm/@codewithkyle/lazy-loader@1/lazy-loader.min.mjs\";\n```\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@codewithkyle/lazy-loader@1/lazy-loader.min.js\"\u003e\n```\n\n## Usage\n\n### ES Module\n\n```typescript\nimport { configure, update, mount, css } from \"https://cdn.jsdelivr.net/npm/@codewithkyle/lazy-loader@1/lazy-loader.min.mjs\";\n\n// Start the lazy loading process by configuring the default locations for your JS and CSS files\nconfigure({\n    jsDir: \"/js\",\n    cssDir: \"/css\",\n    default: \"lazy\", // optional\n    lazierCSS: false, // optional\n});\n\n// Alternatively if the default settings (seen above) are okay you could simply call the update function instead\n// You can call the update function at any time\nupdate();\n\n// Manually mount new components\nimport { MyCustomElement } from \"./my-custom-element.js\";\nmount(\"my-custom-element\", MyCustomElement); // returns a promise\n\n// Alternatively if the components file name matches the tag name the library can dynamically import the script from the JS directory (see configure function)\nmount(\"my-custom-element\");\n\n// Manually lazy load CSS files\ncss(\"exmaple.css\"); // returns a promise\n\n// Alternatively you can load multiple files at once\ncss([\"example-one\", \"examle-two.css\", \"https://cdn.example.com/example-two.css\", \"../../relative-path-example.css\"]);\n```\n\n### Common JS\n\n```typescript\nLazyLoader.configure({\n    jsDir: \"/\",\n    cssDir: \"/\",\n    default: \"lazy\", // optional\n    lazierCSS: false, // optional\n});\nLazyLoader.update();\nLazyLoader.mount(\"my-custom-element\")\n```\n\n### Interfaces\n\n```typescript\ntype Loading = \"eager\" | \"lazy\";\n\ninterface LazyLoaderSettings {\n    cssDir?: string;\n    jsDir?: string;\n    default?: Loading;\n    lazierCSS: boolean;\n};\n\ndeclare const configure: (settings?:Partial\u003cLazyLoaderSettings\u003e) =\u003e void;\ndeclare const update: () =\u003e void;\ndeclare const mount: (tagName:string, constructor?: CustomElementConstructor) =\u003e Promise\u003cvoid\u003e;\ndeclare const css: (files:string|string[]) =\u003e Promise\u003cvoid\u003e;\n```\n\n### HTML Attributes\n\n```html\n\u003c!-- Lazy load Web Components by tagging custom elements with the web-component attribute. --\u003e\n\u003c!-- In this example the custom-element.js file will be imported from the configured jsDir directory. --\u003e\n\u003ccustom-element web-component\u003e\u003c/custom-element\u003e\n\n\u003c!-- You can override the default import behavior by providing a custom file name, relative path, or a URL. --\u003e\n\u003ccustom-element web-component=\"custom-file-name.js\"\u003e\u003c/custom-element\u003e\n\n\u003c!-- By default components are loaded and mounted when they enter the viewport. --\u003e\n\u003c!-- You can bypass the lazy loader by using the loading attribute. --\u003e\n\u003ccustom-element web-component loading=\"eager\"\u003e\u003c/custom-element\u003e\n\n\u003c!-- You can lazy load CSS by attaching the css attribute to any element within the documents body. --\u003e\n\u003c!-- You can load multiple files using a whitespace separator. Note that the .css file extenstion is optional. --\u003e\n\u003cdiv class=\"my-awesome-class\" css=\"awesome-transitions awesome.css\"\u003e\u003c/div\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Flazy-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithkyle%2Flazy-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Flazy-loader/lists"}