https://github.com/msmathers/laterscript
Defer & programmatically trigger loading of <script> tags.
https://github.com/msmathers/laterscript
defer-loading load-js script-tag
Last synced: 3 months ago
JSON representation
Defer & programmatically trigger loading of <script> tags.
- Host: GitHub
- URL: https://github.com/msmathers/laterscript
- Owner: msmathers
- Created: 2020-05-01T13:51:26.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-05T21:29:13.000Z (about 5 years ago)
- Last Synced: 2025-01-29T10:19:11.048Z (5 months ago)
- Topics: defer-loading, load-js, script-tag
- Language: JavaScript
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# <laterscript>
Defer & programmatically trigger loading of `` tags.
This is useful for external, third party JS dependencies that you want to embed in a base HTML template but don't want to load & parse until a later, programmatically-invoked time.
## Usage
Include the laterscript JS tag above your first `<laterscript>` tag.
```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/msmathers/laterscript@master/js/laterscript.js">
```
Use a `` tag for inline or remote JS scripts. Make sure it has an ID.
```html
```
Activate the script via `laterscript.load()`. Returns a promise that resolves once the script has been loaded & parsed.
```js
laterscript.load('myscript').then(function(scriptEl) {
console.log('script loaded!')
})
```
The `` element is replaced with a `` element, which gets parsed and loaded once it hits the DOM.
```html
<script id="myscript" type="text/javascript" src="/path/to/file.js">
```
## Example
```html
$(document).ready(function() {
$('body').html('
jQuery loaded!
')
})
Load jQuery
(function() {
var btn = document.getElementById('load-query-btn');
btn.onclick = function() {
laterscript.load('jqueryjs')
.then(function() { laterscript.load('usejquery') })
}
})()
```