{"id":18300317,"url":"https://github.com/jpdevries/lazyload-css","last_synced_at":"2025-07-28T23:31:27.248Z","repository":{"id":58238629,"uuid":"86188337","full_name":"jpdevries/lazyload-css","owner":"jpdevries","description":"Promise based method for adding a style sheet to the page if it has not already been added","archived":false,"fork":false,"pushed_at":"2018-12-13T09:23:47.000Z","size":68,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-22T01:41:57.243Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpdevries.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}},"created_at":"2017-03-25T21:02:02.000Z","updated_at":"2020-12-03T05:39:38.000Z","dependencies_parsed_at":"2022-08-31T00:30:44.509Z","dependency_job_id":null,"html_url":"https://github.com/jpdevries/lazyload-css","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpdevries","download_url":"https://codeload.github.com/jpdevries/lazyload-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227962265,"owners_count":17847912,"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-05T15:12:01.319Z","updated_at":"2024-12-03T17:12:56.873Z","avatar_url":"https://github.com/jpdevries.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lazyload-css 😴 \u0026middot; [![Build Status](https://travis-ci.org/jpdevries/lazyload-css.svg?branch=master)](https://travis-ci.org/jpdevries/lazyload-css) [![npm version](https://badge.fury.io/js/lazyload-css.svg)](https://badge.fury.io/js/lazyload-css)\nPromise based method for adding a style sheet to the page if it has not already been added\n\n## Install\n\n```bash\nyarn add lazyload-css\n```\n\n```bash\nbower install lazyload-css --save\n```\n\n## Weigh In\n#### Imported Weight\nWhen used with `require()` you'll notice very little weight is added to your bundle.\n\n```js\nconst lazyLoadCSS = require('lazyLoadCSS');\n```\n\n#### VanillaJS Weight\n| Script        | Disk Size           | GZIP  |\n| ------------- | ------------- | ----- |\n| `lazyload-css.1.0.0.js`      | `4.36kB`      |   `1.39kB` |\n| `lazyload-css.1.0.0.min.js`      | `1.47kB`      |   `718b` |\n\nThe UMD module wrapper weighs more than the `lazyLoadCSS()` method itself.  \nIf you want to go rogue, you can [load directly from source](https://github.com/jpdevries/lazyload-css/blob/master/lazyload-css.js).\n\n## Usage\n\n`lazyLoadCSS` accepts two parameters. The path to the script to load and an optional `id` or configuration Object.\n\n```js\nlazyLoadCSS('css/main.css', 'main').then(() =\u003e {\n  // main.css is loaded now with an id of main\n})\n```\n_The id parameter is optional. It is used to ensure that subsequent requests to load a script with that same id immediately resolve. If you omit the id parameter, the DOM will first be queried for a `\u003clink\u003e` with the same `href` attribute, before making a new request by appending a new `\u003clink\u003e` tag._\n\n`lazyLoadCSS` uses this id to ensure scripts with the same id are only loaded once. This allows web components to request dependencies with `lazyLoadCSS` and rest assured the sheets will only be loaded once regardless of how many times they are requested.\n\n`lazyLoadCSS` is packaged as a UMD module so it can be included in several ways.\n\n\u003e The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.  \n\u0026emsp;\u0026mdash;\u0026emsp;[umd](https://github.com/umdjs/umd)\n\nWith `require()`  \n```js\nconst lazyLoadCSS = require(`lazyLoadCSS`);\nlazyLoadCSS('main.css', 'main').then(() =\u003e {\n  /// main.css loaded\n});\n\n```\n\nWith VanillaJS\n```js\nlazyLoadCSS('main.css', 'main').then(() =\u003e {\n  /// main.css loaded\n});\n```\n\nMultiple stylesheets can be asynchronously loaded by passing an Array of `lazyLoadCSS` promises to `Promise.all()`.\n\n```js\n  Promise.all([\n    lazyLoadCSS(\"assets/css/base.css\", \"base\"),\n    lazyLoadCSS(\"assets/css/layout.css\", \"layout\")\n  ]).then(() =\u003e {\n    // stylesheets are loaded now\n  });\n```\n\n## Configuration\n\n`lazyLoadCSS` accepts two parameters. The path to the script to load and an optional `id` or configuration Object.\n\n| Option        | Default           | Description  |\n| ------------- | ------------- | ----- |\n| `id`      | `undefined`      |   Used to ensure the same stylesheet isn't added twice |\n| `media`      | `'all'`      |   `media` attribute of the `\u003clink\u003e` to be added |\n| `rel`      | `'stylesheet'`      |   `rel` attribute of the `\u003clink\u003e` to be added |\n| `type`      | `text/css`      |   `type` attribute of the `\u003clink\u003e` to be added |\n| `force`      | `false`      |   If true forces an asset to be loaded even if another with the same `id` or `href` are found |\n\nIn the below example, unless `lazyLoadCSS` already loaded a `\u003clink\u003e` with the same `id` or `href`, `\u003clink type=\"text/css\" rel=\"stylesheet\" media=\"all\" href=\"main.css\" /\u003e` will be appended to `document.head`.\n\n```js\nlazyLoadCSS('main.css', {\n  id: 'main',\n  media: 'screen'\n}).then((link) =\u003e {\n  // link is either the newly added stylesheet or the one that was already there\n});\n```\n\nIn the next example, a stylesheet will forcefully be added regardless of if one with the same `href` or `id` already exists.\n\n```js\nlazyLoadCSS('print.css', {\n  id: 'print',\n  media: 'print',\n  force: true\n}).then((link) =\u003e {\n  // link is the newly added stylesheet\n});\n```\n\n\n## See Also\n - [`lazyload-script`](https://github.com/jpdevries/lazyload-script/#lazyload-script)\n\n## ✅ Getting Started\nWe're going to use `yarn` so make sure that is installed.\n\n```bash\nnpm install yarn -g\n```\n\nNow clone the repo and run the tests.\n\n```bash\ngit clone -b master git://github.com/jpdevries/lazyload-css.git\ncd lazyload-css\nyarn\nyarn test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Flazyload-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpdevries%2Flazyload-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Flazyload-css/lists"}