{"id":17919178,"url":"https://github.com/lubber-de/stackload","last_synced_at":"2026-05-01T13:32:43.028Z","repository":{"id":63442158,"uuid":"107268628","full_name":"lubber-de/stackload","owner":"lubber-de","description":"stackLoad - A tiny synchronous Javascript/JsonP/CSS module loader that simply does its job.","archived":false,"fork":false,"pushed_at":"2022-11-17T21:13:00.000Z","size":39,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-22T04:48:06.804Z","etag":null,"topics":["css","javascript","jsonp","module-loader","synchronous","tiny"],"latest_commit_sha":null,"homepage":"","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/lubber-de.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}},"created_at":"2017-10-17T12:56:27.000Z","updated_at":"2023-04-11T15:21:32.000Z","dependencies_parsed_at":"2022-11-19T01:31:43.970Z","dependency_job_id":null,"html_url":"https://github.com/lubber-de/stackload","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/lubber-de/stackload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2Fstackload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2Fstackload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2Fstackload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2Fstackload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lubber-de","download_url":"https://codeload.github.com/lubber-de/stackload/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lubber-de%2Fstackload/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32499681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["css","javascript","jsonp","module-loader","synchronous","tiny"],"created_at":"2024-10-28T20:14:59.959Z","updated_at":"2026-05-01T13:32:43.008Z","avatar_url":"https://github.com/lubber-de.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stackLoad - A tiny synchronous JavaScript/JsonP/CSS module loader that simply does its job.\n###### Marco \"[Lubber](http://csdb.dk/scener/?id=124)\" Wienkoop\n![version](https://img.shields.io/github/tag/lubber-de/stackload.svg)  \n![size_gzip](https://badges.herokuapp.com/size/github/lubber-de/stackload/master/stackload.min.js?gzip=true)\n![size](https://badges.herokuapp.com/size/github/lubber-de/stackload/master/stackload.min.js)  \n![browsers](https://badges.herokuapp.com/browsers?\u0026microsoftedge=80%2b\u0026googlechrome=80%2b\u0026versionDivider=true)\n![browsers](https://badges.herokuapp.com/browsers?firefox=72%2b\u0026versionDivider=true)\n![mobile](https://badges.herokuapp.com/browsers?android=-8%2b\u0026iphone=7%2b\u0026ipad=4%2b\u0026versionDivider=true)\n![mobile](https://badges.herokuapp.com/browsers?safari=13.4%2b\u0026opera=13%2b\u0026versionDivider=true)  \n![license](https://img.shields.io/github/license/lubber-de/stackload.svg)  \n\n## Features\n- Checks for particular JavaScript Logic/existing Objects in order to prevent loading already existing code which was _not_ embedded using stackload\n- Avoids multiple embedding of same files\n- Files will be stacked and loaded synchronously after each other and a callback can be given for each stack\n- Logs missing files to the console if supported\n- Could cancel the whole stackload if just one file is missing\n- Guesses filetypes\n- Dynamic parameter handling\n- supports npm semver package naming and loads from jsdelivr \n- can autoload by a single stackload inclusion using a GET parameter\n- Vanilla JavaScript: Does not need other libraries itself :)\n\nThis small library is especially useful if you want to provide something in one single js file without copying all dependency libraries into it, but still rely on external resources/CDNs, so your single js file stays small and the user does not need to implement or even know what other dependencies are needed to be embedded.  \nSo this library is tiny enough to be embedded into your own single-js file library\n\n## Usage\n\n1. Implement one script tag or copy the code on top of your own library.\n    ```html\n    \u003cscript type=\"text/javascript\" src=\"stackload.min.js\"\u003e\u003c/script\u003e\n    ```\n2. Call it with an object of configuration. That's it\n    ```javascript\n    stackLoad(filename|fileArray|fileObject|stackObject);\n    ```\nYou can stack multiple callbacks each having a bunch of files and individual callbacks using the appending `.then` method\n```javascript\nstackLoad(...).then(filename|fileArray|fileObject|stackObject).then(...);\n```  \n\nYou can autoload files while including the stackload script\n```html\n\u003cscript type=\"text/javascript\" src=\"stackload.min.js?autoload=fomantic-ui@2.9.0/dist/semantic.min.css\"\u003e\u003c/script\u003e\n```\n\n\n#### Parameter\n\nThe only Parameter stackLoad needs is either\n- a string of a filename\n\n```javascript\nstackLoad('foo.js');\n// use npm package nameing and stackload will load from jsdelivr CDN automatically\nstackLoad('fomantic-ui@2.9.0');\n```\n- an array with strings of filenames\n\n```javascript\nstackLoad(['foo.js','bar.css']);\n```\n- a fileObject\n\n```javascript\nstackLoad({\n    url: 'foo.js'\n});\n```\n- a stackObject with additional features like callback functions for (un)successful loads \n\n```javascript\nstackLoad({\n    files: ['foo.js','bar.css'],\n    success: function(){...},\n    error: function(e){...} \n});\n```\n\nfileObject Configuration\n```javascript\nstackLoad({\n    url: 'domain.tld/folder@version',        \n    check: 'window.jQuery',\n    type: 'css'   \n});\n```\n\n#### fileObject Properties\n**url**: `string` (mandatory)\n\n**check**: `string`  \nJS code as a string (! Because this could rely on some previous needed code loaded by stackLoad before) as a dependency if code perhaps already exists.\n- The (last) statement of the code needs to **end with an expression** (`var a=1,b=2;b\u003c0;`) and _**not**_ a return statement (`var a=1,b=2;return b\u003c0;`). If that expression is either undefined/false/null then the appropriate file will be loaded\n- stackLoad has a little internal helper to get CSS style properties of a selector path. Just use the function `cssProperties()` within your JS Code\n\n```javascript\n//cssProperties takes a css selector string and returns all style-object properties\n    check: 'cssProperties(\"ui multiple foo bar classnames\").backgroundImage===\"none\"'\n```\n- Can be omitted, the file will be loaded immediately then.\n\n**type**: `string`  \nIf omitted, stackLoad tries to guess it from a possible file extension. Otherwise assumes 'js' as default. Other possible values are:\n- `css`\n- `jsonp`  \nUsing jsonp assumes the url already has the probably needed callback function name as part of the url. stackLoad just adds a timestamp to the url to make sure it is not cached \n- Anything else is considered JavaScript.\n\n**noCache**: `boolean`  \nSet to true if you definately want to skip cache-load for the file and force redownloading from the server\n\n#### stackObject Properties\n**files**:  `string` | `array()` of strings | `fileObject` | `array()` of fileObjects  \nThe files will be synchronously loaded in the order of the array. So take care of possible dependencies.  \n    \n**success**: `function()`\n- Will be called once when _all_ files of the files within the current stackObject have been loaded (regardless if a file was found or not)\n- Can be omitted\n\n**error**: `function(eventObject)`\n- Will be called on _each_ failed load within the current stackObject. The event object will be delivered to the function as a parameter\n- If the given function returns `false` then loading of all remaining files within the current stackObject will be canceled. It's still possible to start another stackLoad again later.\n- Can be omitted\n\u003e Internet Explorer does not trigger failing load events for **css** files!\n  \n\n## Examples\n\nLoad a file.\n```javascript\nstackLoad('http://cdn.tld/lib/foo.css');\n```\n\nLoad a list of files.\n```javascript\nstackLoad([\n    'main.js',\n    'http://cdn.tld/lib/foo.css'\n]);\n```\n\nThe file type will be guessed according to file extension. JS will be assumed by default\n```javascript\nstackLoad([\n    'main.js',                                   //-\u003e detects js file\n    'main.css',                                  //-\u003e detects css file    \n    'mainUpper.CSS',                             //-\u003e detects css file    \n    'foo.css?count=1',                           //-\u003e detects css file\n    'bar.JS?version=1.2.3#ubuntu',               //-\u003e detects js file\n    'http://domain.tld/folder/library@version'   //-\u003e detects js file (because no extension available)\n]);\n```\n\nLoading URLs with unguessable file types which won't be JS files\n```javascript\nstackLoad({ \n    url:'http://domain.tld/folder/stylesheets/library@version',\n    type: 'css'\n});\n```\n\nLoading jsonp\n```javascript\nstackLoad({ \n    url:'http://domain.tld/foo/bar?callback=testfunc',\n    type: 'jsonp'\n});\n```\n\nPrevent Caching / Force Server reload (automatically enabled for jsonp files)\n```javascript\nstackLoad({ \n    url:'http://domain.tld/foo/bar.js',\n    noCache: true\n});\n```\n\nCall a function when all files are loaded\n```javascript\nstackLoad({\n    files: [\n        'main.js',\n        'http://cdn.tld/lib/foo.css'\n    ],\n    success: function(){\n       console.log('loading finished'); \n    }\n});\n```\n\nLoad jQuery only if not already available:\n```javascript\nstackLoad({\n    files: {\n        check: 'window.jQuery',\n        url: '//cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js'\n    },\n    success: function(){\n        // jQuery is available now\n        $(function() {\n            // ...\n        });\n    }\n});\n\n```\n\n\n\nLoad jQuery and [Fomantic UI](https://fomantic-ui.com) each having a different Callback using the `.then` method\n```javascript\nstackLoad({\n    files: [{\n        check: 'window.jQuery',\n        url: '//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'\n    }],\n    success: function(){\n        // jQuery is available now\n        $(function() {\n            // ...\n        });\n    }\n}).then({\n    files: [{\n        type:'css',\n        url:'//cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.css'\n    },{\n        check: 'jQuery().modal',\n        url: '//cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.js'\n    }],\n    success: function(){\n    // Fomantic UI is also available now\n        $('#gallery').modal('show');\n    }\n});\n```\n\nCheck for a specific CSS property in order to load a CSS file (to not only rely on the filename)  \nIn this example a HTML tag with assigned class \"ui popup\" should have a z-index of 1900 if Fomantic UI CSS is already available \n```javascript\nstackLoad({\n    files: [{\n        check: 'parseInt(cssProperties(\"ui popup\").zIndex,10)===1900',\n        type:'css',\n        url:'//cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.css'\n    }]\n});\n```\n\n\n\nLoad jQuery, but load [Fomantic UI](https://fomantic-ui.com) at a later stage and ignore already loaded libraries\n```javascript\nstackLoad({\n    check: 'window.jQuery',\n    url: '//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'\n});\n\n// ...\n// Lots of your code in between\n// ...\n\n// stackLoad remembers what it has already loaded jquery before,\n// so it will skip loading jQuery from the same url again.\nstackLoad({\n    files: [\n    '//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js',\n    {\n         type:'css',\n         url:'//cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.css'\n    },{\n         check: 'jQuery().modal',\n         url: '//cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.js'\n    }],\n    success: function(){\n     // Fomantic UI is also available now\n         $('#gallery').modal('show');\n    }\n});\n```\n\n#### Using the error method property\n\nDo something in case a file is missing\n```javascript\nstackLoad({\n    files: ['foo.css','bar.js'],\n    error: function(e){\n        console.log('Missing file:', (e.target.src ?? e.target.href));\n    }\n});\n```\n\nCancel load in case a file is missing.  \nSimply **return false** in your function to make this happen.\n```javascript\nstackLoad({\n    files: ['foo.css','bar.js'],\n    error: function(e){\n        console.log('Missing file:', (e.target.src ?? e.target.href));\n        console.log('All remaining files will be cancelled!');\n        return false;\n    }\n});\n```\n\n\n## License\n [MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flubber-de%2Fstackload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flubber-de%2Fstackload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flubber-de%2Fstackload/lists"}