{"id":18300318,"url":"https://github.com/jpdevries/lazyload-script","last_synced_at":"2025-08-19T23:07:04.388Z","repository":{"id":19097930,"uuid":"86188367","full_name":"jpdevries/lazyload-script","owner":"jpdevries","description":"Promise based method for adding a script to the page if it has not already been added","archived":false,"fork":false,"pushed_at":"2022-12-06T23:31:01.000Z","size":251,"stargazers_count":7,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-27T06:42:20.629Z","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:41.000Z","updated_at":"2023-12-20T17:27:37.000Z","dependencies_parsed_at":"2022-08-07T09:01:09.427Z","dependency_job_id":null,"html_url":"https://github.com/jpdevries/lazyload-script","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jpdevries/lazyload-script","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpdevries","download_url":"https://codeload.github.com/jpdevries/lazyload-script/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Flazyload-script/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271236280,"owners_count":24723978,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"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":[],"created_at":"2024-11-05T15:12:01.346Z","updated_at":"2025-08-19T23:07:04.317Z","avatar_url":"https://github.com/jpdevries.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lazyload-script 😴 \u0026middot; [![Build Status](https://travis-ci.org/jpdevries/lazyload-script.svg?branch=master)](https://travis-ci.org/jpdevries/lazyload-script) [![npm version](https://badge.fury.io/js/lazyload-script.svg)](https://badge.fury.io/js/lazyload-script)\n\nPromise based method for adding a script to the page if it has not already been added.\n\n##  Install\n\n```bash\nyarn add lazyload-script\n```\n\n```bash\nbower install lazyload-script --save\n```\n\n## Weight In\n#### Imported Weight\nWhen used with `require()` you'll notice very little weight is added to your bundle.\n\n```js\nconst lazyLoadScript = require('lazyLoadScript');\n```\n\n#### VanillaJS Weight\n| Script        | Disk Size           | GZIP  |\n| ------------- | ------------- | ----- |\n| `lazyload-script.1.0.0.js`      | `4.82kB`      |   `1.48kB` |\n| `lazyload-script.1.0.0.min.js`      | `1.64kB`      |   `773b` |\n\nThe UMD module wrapper weighs more than the `lazyLoadScript()` method itself.  \nIf you want to go rogue, you can [load directly from source](https://github.com/jpdevries/lazyload-script/blob/master/lazyload-script.js).\n\n## Usage\n\n`lazyLoadScript` accepts two parameters. The path to the script to load and either an id or configuration object.\n\n```js\nlazyLoadScript('js/main.js', 'main').then(() =\u003e {\n  // main.js 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 `\u003cscript\u003e` with the same `src` attribute, before making a new request by appending a new `\u003cscript\u003e` tag._\n\n`lazyLoadScript` uses this id to ensure scripts with the same id are only loaded once. This allows web components to request dependencies with `lazyLoadScript` and rest assured the script will always be ready but only be requested as needed.\n\n\n`lazyLoadScript` 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 lazyLoadScript = require(`lazyLoadScript`);\nlazyLoadScript('main.js', 'main').then(() =\u003e {\n  /// main.js loaded\n});\n\n```\n\nWith VanillaJS\n```js\nlazyLoadScript('main.js', 'main').then(() =\u003e {\n  /// main.js loaded\n});\n```\n\nMultiple scripts can asynchronously be loaded by passing an Array of `lazyLoadScript` promises to `Promise.all()`.\n\n```js\n  Promise.all([\n    lazyLoadScript(\"https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js\", \"react.15.4.2.min.js\"),\n    lazyLoadScript(\"https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js\", \"react-dom.15.4.2.min.js\")\n  ]).then(() =\u003e {\n    // React is ready, maybe load your component with lazyLoadScript() now?\n  });\n```\n\n## Configuration\n\n`lazyLoadScript` accepts two parameters. The path to the script to load and either an id or configuration object.\n\n| Option        | Default           | Description  |\n| ------------- | ------------- | ----- |\n| `async`      | `undefined`      |   If true adds an `async` attribute |\n| `defer`      | `undefined`      |   If true adds a `defer` attribute |\n| `integrity`      | `undefined`      |   If set adds an `integrity` attribute |\n| `type`      | `undefined`      |   If set adds a `type` attribute |\n| `text`      | `undefined`      |   If set adds an `text` attribute |\n| `charset`      | `undefined`      |   If set adds an `charset` attribute |\n| `crossorigin`      | `undefined`      |   If set adds an `crossorigin` attribute |\n| `force`      | `false`      |   If true forces an asset to be loaded even if another with the same `id` or `href` are found |\n\n## CDN Fallbacks\n\nLoading common libraries and frameworks from CDNs can be great for leveraging the browser cache, but to keep your experience functional in the event the CDN is unreachable, it is recommended to load a local fallback.\n\nFor example:\n\n```js\nconst promises = [\n  // try to load React from a CDN, fallback to a local copy\n  lazyLoadScript(\"https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js\", \"react.15.4.2.min.js\").catch((err =\u003e (\n    lazyLoadScript(`./js/vendor/react.15.4.2.min.js`, \"react.15.4.2.min.js\")\n  ))),\n  // try to load React DOM from a CDN, fallback to a local copy\n  lazyLoadScript(\"https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js\", \"react-dom.15.4.2.min.js\").catch((err =\u003e {\n    lazyLoadScript(`./js/vendor/react-dom.15.4.2.min.js`, \"react-dom.15.4.2.min.js\")\n  })),\n  // try to load Redux from a CDN, fallback to a local copy\n  lazyLoadScript(\"https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js\", \"redux.3.6.0.min.js\").catch((err =\u003e {\n    lazyLoadScript(`./js/vendor/redux.3.6.0.min.js`, \"redux.3.6.0.min.js\")\n  })),\n  // try to load React Redux from a CDN, fallback to a local copy\n  lazyLoadScript(\"https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js\", \"react-redux.5.0.3.min.js\").catch((err =\u003e {\n    lazyLoadScript(`./js/vendor/react-redux.5.0.3.min.js`, \"react-redux.5.0.3.min.js\")\n  }))\n];\n\n\nPromise.all(promises).then(() =\u003e {\n  // React, React DOM, Redux, and React Redux are ready. woohoo! maybe load your component with lazyLoadScript() now?\n});\n```\n\n## See Also\n - [`lazyload-css`](https://github.com/jpdevries/lazyload-css/tree/master#lazyload-css)\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-script.git\ncd lazyload-script\nyarn\nyarn test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Flazyload-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpdevries%2Flazyload-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Flazyload-script/lists"}