{"id":19312119,"url":"https://github.com/bigcommerce/script-loader-js","last_synced_at":"2025-09-04T05:08:54.295Z","repository":{"id":41142922,"uuid":"115056153","full_name":"bigcommerce/script-loader-js","owner":"bigcommerce","description":"A library for loading JavaScript files asynchronously","archived":false,"fork":false,"pushed_at":"2025-03-24T17:52:34.000Z","size":658,"stargazers_count":21,"open_issues_count":7,"forks_count":8,"subscribers_count":68,"default_branch":"master","last_synced_at":"2025-03-27T02:11:27.954Z","etag":null,"topics":["javascript","script-loader"],"latest_commit_sha":null,"homepage":"","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/bigcommerce.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-12-21T23:27:10.000Z","updated_at":"2025-01-21T15:24:14.000Z","dependencies_parsed_at":"2024-06-11T11:15:09.223Z","dependency_job_id":"a8aba06c-92aa-475c-ac68-f4d4446bf6dc","html_url":"https://github.com/bigcommerce/script-loader-js","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fscript-loader-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fscript-loader-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fscript-loader-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fscript-loader-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigcommerce","download_url":"https://codeload.github.com/bigcommerce/script-loader-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703195,"owners_count":21148117,"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","script-loader"],"created_at":"2024-11-10T00:32:55.596Z","updated_at":"2025-04-13T10:57:17.238Z","avatar_url":"https://github.com/bigcommerce.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @bigcommerce/script-loader\n\n[![Build Status](https://travis-ci.com/bigcommerce/script-loader-js.svg?token=pywwZy8zX1F5AzeQ9WpL\u0026branch=master)](https://travis-ci.com/bigcommerce/script-loader-js)\n\nA library for loading JavaScript files asynchronously. It loads script files by injecting script tags into DOM during runtime.\n\n## Install\n\nYou can install this library using [npm](https://www.npmjs.com/get-npm).\n\n```sh\nnpm install --save @bigcommerce/script-loader\n```\n\n## Usage\n\n### For scripts\n\nTo load a single script:\n\n```js\nimport { createScriptLoader } from '@bigcommerce/script-loader';\n\nconst loader = createScriptLoader();\n\nloader.loadScript('https://cdn.foo.bar/main.js')\n    .then(() =\u003e {\n        console.log('Loaded!');\n    });\n```\n\nTo load multiple scripts:\n\n```js\nloader.loadScripts([\n    'https://cdn.foo.bar/vendor.js',\n    'https://cdn.foo.bar/main.js',\n]);\n```\n\nTo load a script with `async` attribute:\n\n```js\nloader.loadScript('https://cdn.foo.bar/main.js', { async: true });\n```\n\nTo preload or prefetch a script:\n\n```js\nloader.preloadScript('https://cdn.foo.bar/chunk.js');\nloader.preloadScript('https://cdn.foo.bar/another-chunk.js', { prefetch: true });\n```\n\nA prefetched script is a low priority resource, therefore it will be downloaded in the background when the browser is idle. On the other hand, a script without `prefetch` option will be marked as a high priority resource and downloaded immediately. \n\nPlease note that the preloaded or prefetched script won't be executed. It will just be downloaded to the browser cache. To attach it to the document and execute it, you will need to call `loadScript` with the same URL.\n\nTo preload or prefetch multiple scripts:\n\n```js\nloader.preloadScripts([\n    'https://cdn.foo.bar/chunk.js',\n    'https://cdn.foo.bar/another-chunk.js',\n]);\n\nloader.preloadScripts([\n    'https://cdn.foo.bar/chunk.js',\n    'https://cdn.foo.bar/another-chunk.js',\n], { prefetch: true });\n```\n\nFor browsers that don't have the ability to `preload` or `prefetch` resources, scripts will be loaded using regular Ajax requests instead.\n\n### For stylesheets\n\nTo load a single stylesheet:\n\n```js\nimport { createStylesheetLoader } from '@bigcommerce/script-loader';\n\nconst loader = createStylesheetLoader();\n\nloader.loadStylesheet('https://cdn.foo.bar/main.css')\n    .then(() =\u003e {\n        console.log('Loaded!');\n    });\n```\n\nTo load multiple stylesheets:\n\n```js\nloader.loadStylesheet([\n    'https://cdn.foo.bar/vendor.css',\n    'https://cdn.foo.bar/main.css',\n]);\n```\n\nTo prepend, instead of append, a stylesheet to the head of a document:\n\n```js\nloader.loadStylesheet('https://cdn.foo.bar/main.css', { prepend: true });\n```\n\nTo preload or prefetch a stylesheet:\n\n```js\nloader.preloadStylesheet('https://cdn.foo.bar/chunk.css');\nloader.preloadStylesheet('https://cdn.foo.bar/another-chunk.css', { prefetch: true });\n```\n\nSimilar to a preloaded script, a preloaded or prefetched stylesheet won't take an effect until it is attached to the document. To do it, you will need to call `loadStylesheet` with the same URL.\n\n```js\nloader.preloadStylesheets([\n    'https://cdn.foo.bar/chunk.css',\n    'https://cdn.foo.bar/another-chunk.css',\n]);\n\nloader.preloadStylesheets([\n    'https://cdn.foo.bar/chunk.css',\n    'https://cdn.foo.bar/another-chunk.css',\n], { prefetch: true });\n```\n\n## Contribution\n\nTo release:\n\n```sh\nnpm run release\n```\n\nTo see other available commands:\n\n```sh\nnpm run\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fscript-loader-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigcommerce%2Fscript-loader-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fscript-loader-js/lists"}