modularload

Dead simple page transitions and lazy loading.

Usage no npm install needed!

<script type="module">
  import modularload from 'https://cdn.skypack.dev/modularload';
</script>

README

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

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.