Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antonlapshin/doitlater
Lazy Loading
https://github.com/antonlapshin/doitlater
Last synced: about 1 month ago
JSON representation
Lazy Loading
- Host: GitHub
- URL: https://github.com/antonlapshin/doitlater
- Owner: AntonLapshin
- License: mit
- Created: 2017-10-10T19:44:52.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-12T17:40:18.000Z (about 7 years ago)
- Last Synced: 2024-11-19T18:05:51.758Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 97.7 KB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# doitlater
![](https://image.ibb.co/mVfs1G/image.png)
Increase page loading speed, just load/execute unnecessary things later!
Defer scripts, styles, html, json, images, functions!
[![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)]()
![Lib Size](http://img.badgesize.io/AntonLapshin/doitlater/master/bin/doitlater.min.js.svg?compression=gzip)
[![npm](https://img.shields.io/npm/dt/doitlater.svg)](https://www.npmjs.com/package/doitlater)
[![GitHub stars](https://img.shields.io/github/stars/AntonLapshin/doitlater.svg?style=social&label=Star)](https://github.com/AntonLapshin/doitlater)> Use [promise-polyfill](https://www.npmjs.com/package/promise-polyfill) for old browsers support
## Install
npm install doitlater --save
## Usage
### Execute a snippet (after DOM Ready event for example):
```js
doitlater.waitFor("DOMReady").then(() => {
doitlater.load("gtm", () => {
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');
});
});window.addEventListener('load', () => {
doitlater.add("DOMReady", Promise.resolve);
});
```### Load a stylesheet:
```js
doitlater.waitFor("gtm").then(() => {
doitlater.load("materializecss", "//cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css");
});
```### Preaload images:
```js
doitlater.load("header-images", ["/img/logo.png", "/img/bg.jpg"]);
```### Load JSON:
```js
doitlater.load("headerJSON", "/config/header.json");
```### Execute functions:
```js
doitlater.waitFor("DOMReady").then(() => {
doitlater.load("logging", () => { console.log("DOM Ready")});
});doitlater.waitFor("logging").then(() => {
console.log("After logging");
});
```### Mixed loading:
```js
doitlater.load(
"resources",
[
"/img/logo.png", "/config/header.json", "/css/header.css",
() => { console.log("Logging")}
]
);
```### Load a view (HTML file)
```js
doitlater.waitFor("DOMReady").then(() => {
doitlater.load("headerHTML", "/view/header.html").then(result => {
const html = result[0]; // result is an Array
document.body.insertAdjacentHTML("afterend", html);
})
});
```### Reuse your promises
```js
doitlater.add(
"headerLoaded",
Promise.all([
doitlater.waitFor("resources"),
doitlater.waitFor("headerHTML")
])
);doitlater.waitFor("headerLoaded").then(()=>{
console.log("Header has been loaded");
});
```### async/await example
```js
await doitlater.waitFor("DOMReady");
await doitlater.load("resources", [
"/img/logo.png", "/config/header.json", "/css/header.css"
]);
```## Other useful methods
### createDefer
```js
const defer = doitlater.createDefer();
defer.promise.then(() => { console.log("Resolved")});
defer.resolve();
```### runLater
```js
doitlater.runLater(() => {
console.log("Executed in Idle or in a new frame if it's supported");
});
```For more detailed information read [API](API.md)