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

lockandload

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lockandload

Minimalist AMD-compliant Javascript and CSS loader

  • 1.1.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8
decreased by-20%
Maintainers
1
Weekly downloads
 
Created
Source

lockandload

Lockandload is a minimalist AMD-loader-compatible boilerplate to kickstart your website/single-page-app.

Gzipped, the essential script content amounts to roughly 1KB of code. Without compression it blows up to just under 2KB. Further minifying this code does not result in any significant gains, it would just hinder readability.

Features

  • Less filling: 1KB of gzipped script content.
  • Handminified to retain readable and maintainable code.
  • It's so small, it can and should be inlined on your HTML page (which is also one of the reasons to handminify it only).
  • Because it is inlined, it is faster than all other loaders.
  • Fully asynchronous script loader: AMD-compatible.
  • Supports anonymous define() calls.
  • Supports local require() calls (with one and two arguments).
  • Supports implicit and explicit ['require'] dependencies.
  • Does not support implicit nor explicit exports/module dependencies.
  • Circular dependencies will silently hang in unresolved state (or put differently: do not do that).
  • No extra diagnostic code to minimise code weight and optimise loading speed.
  • Fully event driven, no polling timers.
  • Standard event: domready.
  • Both high and low priority asynchronous loading of Javascript and CSS files.
  • Leverages native browser speed for high priority loading (by getting out of the way).
  • Legacy support for $(...) jquery riddled synchronous code.
  • Legacy support for loading synchronous Javascript.
  • Single-page-app support using $$(...) page refresh callbacks.
  • Supports IE10 and up and all other webbrowsers.
  • No config file, means: no syntax to learn, no config file parser code.

Requirements

It runs inside any webbrowser environment (starting at IE10 and up).

Usage

Copy index.html, main.js and css/main.css boilerplate files to your own new website, and start adjusting them to taste. The index.html contains two <script> sections. The first section should not be preceded by any other <script> tags. The second section should be placed at or close to the end of the <head>, and should not precede any direct <link type="stylesheet"> tags.

The basic structure of a page should be:

  • html
    • head
      • Charset declaration.
      • Inline lockandload master script.
      • High priority async external scripts.
      • Viewport declaration.
      • High priority CSS scripts.
      • <title>.
      • All other tags that should go in the <head>.
      • Inline lockandload 'headready' script.
        • Low priority CSS scripts.
        • Low priority async Javascript scripts.
        • Low priority synchronous Javascript scripts.
    • body
      • All other inline scripts (if you must).

The index.html file is a production-stripped version of annotated.html. Look at annotated.html to understand the code and read additional inline documentation.

API

Globally:

  • define(id?, dependencies?, factory)
    The standard AMD global entrypoint. To figure out module ids of all the modules that you are trying to load, uncomment some debugging code in the primary load script and inspect your console-pane in the browser.

Locally in the secondary localandload 'headready' script; all path arguments are used verbatim in <link href="path"> or <script src="path"> tags:

  • css(path)
    Loads additional low priority ordered css files asynchronously.
  • js(path)
    Loads additional low priority unordered Javascript files asynchronously.
  • sjs(path)
    Loads additional low priority ordered Javascript files sequentially yet asynchronously (as a group).

References

Other loaders:

Keywords

FAQs

Package last updated on 24 Aug 2018

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc