Lazy Loader

A lightweight (~2kb) Web Component based lazy loading library.

Install

Install via NPM:

npm i -S @codewithkyle/lazy-loader

Or via CDN:

import{configure,update,mount,css}from"https://cdn.jsdelivr.net/npm/@codewithkyle/lazy-loader@1/lazy-loader.min.mjs";

<scriptsrc="https://cdn.jsdelivr.net/npm/@codewithkyle/lazy-loader@1/lazy-loader.min.js">

Usage

ES Module

import{configure,update,mount,css}from"https://cdn.jsdelivr.net/npm/@codewithkyle/lazy-loader@1/lazy-loader.min.mjs";// Start the lazy loading process by configuring the default locations for your JS and CSS filesconfigure({jsDir: "/js",cssDir: "/css",default: "lazy",// optionallazierCSS: false,// optional});// Alternatively if the default settings (seen above) are okay you could simply call the update function instead// You can call the update function at any timeupdate();// Manually mount new componentsimport{MyCustomElement}from"./my-custom-element.js";mount("my-custom-element",MyCustomElement);// returns a promise// Alternatively if the components file name matches the tag name the library can dynamically import the script from the JS directory (see configure function)mount("my-custom-element");// Manually lazy load CSS filescss("exmaple.css");// returns a promise// Alternatively you can load multiple files at oncecss(["example-one","examle-two.css","https://cdn.example.com/example-two.css","../../relative-path-example.css"]);

Common JS

LazyLoader.configure({jsDir: "/",cssDir: "/",default: "lazy",// optionallazierCSS: false,// optional});LazyLoader.update();LazyLoader.mount("my-custom-element")

Interfaces

typeLoading="eager"|"lazy";interfaceLazyLoaderSettings{cssDir?: string;jsDir?: string;default?: Loading;lazierCSS: boolean;};declareconstconfigure: (settings?:Partial<LazyLoaderSettings>)=>void;declareconstupdate: ()=>void;declareconstmount: (tagName:string,constructor?: CustomElementConstructor)=>Promise<void>;declareconstcss: (files:string|string[])=>Promise<void>;

HTML Attributes

<!-- Lazy load Web Components by tagging custom elements with the web-component attribute. --><!-- In this example the custom-element.js file will be imported from the configured jsDir directory. --><custom-elementweb-component></custom-element><!-- You can override the default import behavior by providing a custom file name, relative path, or a URL. --><custom-elementweb-component="custom-file-name.js"></custom-element><!-- By default components are loaded and mounted when they enter the viewport. --><!-- You can bypass the lazy loader by using the loading attribute. --><custom-elementweb-componentloading="eager"></custom-element><!-- You can lazy load CSS by attaching the css attribute to any element within the documents body. --><!-- You can load multiple files using a whitespace separator. Note that the .css file extenstion is optional. --><divclass="my-awesome-class" css="awesome-transitions awesome.css"></div>