Skip to content
□ Dead simple page transitions and lazy loading.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Check for mailto & tel links before preventDefault Jun 5, 2019
.babelrc Initial version Mar 3, 2019
.editorconfig Initial version Mar 3, 2019
.gitignore Initial version Mar 3, 2019
license Initial version Mar 3, 2019
package.json Check for mailto & tel links before preventDefault Jun 5, 2019
readme.md
rollup.config.js Initial version Mar 3, 2019

readme.md

modularLoad

Dead simple page transitions and lazy loading.

Installation

npm install modularload

Why

  • Simple
  • Lightweight
  • Minimal configuration
  • No dependencies

Usage

import modularLoad from 'modularload';

this.load = new modularLoad({
    enterDelay: 300
});
<div data-load-container>
    <h1>Hello</h1>
    <a href="/blog">Read more</a>
</div>

With custom transitions

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> 

With custom container

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>

With lazy images

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> 

With events

import modularLoad from 'modularload';

this.load = new modularLoad();

this.load.on('loaded', (transition, oldContainer, newContainer) => {
    console.log('👌');

    if (transition == 'transitionName') {
        console.log('🤙');
    }
});

With methods

import modularLoad from 'modularload';

this.load = new modularLoad();

this.load.goTo('/page', 'transitionName');

Options

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.
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.

Attributes

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.

Events

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.

Methods

Method Description
goTo('href'[, 'transition'][, true]) Go to href. With optional transition name and boolean for url update only.
You can’t perform that action at this time.