Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

modularload

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

modularload

Dead simple page transitions and lazy loading.

1.1.8
Source
npm

Version published: 6 years ago

Weekly downloads: 19; increased by11.76%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

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('🤙');
    }
});

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.

FAQs

What is modularload?

Is modularload popular?

Is modularload well maintained?

Package last updated on 23 May 2019

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.

Install