modularload
Advanced tools
Dead simple page transitions and lazy loading.
npm install modularload
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 300
});
<div data-load-container>
<h1>Hello</h1>
<a href="/blog">Read more</a>
</div>
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 300,
transitions: {
transitionName: {
enterDelay: 450
},
transitionTwoName: {
enterDelay: 600
}
}
});
<html data-page="home">
<body>
<nav>
<a href="/contact" data-load="transitionName">Contact</a>
</nav>
<div data-load-container>
<h1>Hello</h1>
<a href="/blog" data-load="transitionTwoName">Read more</a>
</div>
</body>
</html>
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 600,
transitions: {
article: {
enterDelay: 300
}
}
});
<div data-load-container>
<div data-load-container="article">
<h1>Article One</h1>
<p>Text</p>
</div>
<a href="/blog/article-one" data-load="article">Article One</a>
<a href="/blog/article-two" data-load="article">Article Two</a>
</div>
import modularLoad from 'modularload';
this.load = new modularLoad();
<div data-load-container>
<header data-load-style="background-image: url('images/header.jpg');">
<h1>Hello</h1>
</header>
<main>
<img data-load-src="images/img.jpg">
<a href="/blog">Read more</a>
</main>
</div>
import modularLoad from 'modularload';
this.load = new modularLoad();
this.load.on('loaded', (transition, oldContainer, newContainer) => {
console.log('👌');
if (transition == 'transitionName') {
console.log('🤙');
}
});
import modularLoad from 'modularload';
this.load = new modularLoad();
this.load.goTo('/page', 'transitionName');
| Option | Type | Default | Description |
|---|---|---|---|
name | string | 'load' | Data attributes name |
loadingClass | string | 'is-loading' | Class when a link is clicked. |
loadedClass | string | 'is-loaded' | Class when the new container enters. |
readyClass | string | 'is-ready' | Class when the old container exits. |
transitionsPrefix | string | 'is-' | Custom transitions class prefix. |
transitionsHistory | boolean | true | Redo the custom transitions while using the back button. |
enterDelay | number | 0 | Minimum delay before the new container enters. |
exitDelay | number | 0 | Delay before the old container exists after the new enters. |
loadedDelay | number | 0 | Delay before adding the loaded class. For example, to wait for your JS DOM updates. |
transitions | object | {} | Custom transitions options. |
| Attribute | Values | Description |
|---|---|---|
data-load-container | , string | Container you want to load with optional string. |
data-load | string, false | Transition name or disable transition. |
data-load-url | boolean | Update url without loading container. |
data-load-src | string | Lazy load src attribute. |
data-load-srcset | string | Lazy load srcset attribute. |
data-load-style | string | Lazy load style attribute. |
data-load-href | string | Lazy load href attribute. |
| Event | Arguments | Description |
|---|---|---|
loading | transition, oldContainer | On link click. |
loaded | transition, oldContainer, newContainer | On new container enter. |
ready | transition, newContainer | On old container exit. |
images | On all images load. |
| Method | Description |
|---|---|
goTo('href'[, 'transition'][, true]) | Go to href. With optional transition name and boolean for url update only. |
FAQs
Dead simple page transitions and lazy loading.
The npm package modularload receives a total of 9 weekly downloads. As such, modularload popularity was classified as not popular.
We found that modularload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.