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

preload-json

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

preload-json

Load data quickly with JSONP

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Preload JSON

semantic-release

preload-json.js allows you to prefetch JSON before it's needed. This lib exists until link[rel=prefetch] or link[rel=preload] are widely adopted.

Scenarios

There are times when this is useful:

  • Page is heavily cached and you need to load dynamic content (e.g. user data)
  • Preload data for content below the fold or behind an interaction.

For more rationale, read about Prefetching, preloading, and prebrowsing

Installation

$ npm i --save preload-json

Usage

First, determine a name for the data set. This will be used when requesting and receiving it.

In <head>

<script type="text/javascript">
  // Automatically setup JSONP receivers and interface with `preload-json.js`
  !function(n,e,i){function o(e){n["pjReceive_"+e]=function(o){n[i].push(["notify",e,o])}}n[i]=n[i]||[],n[e]={register:function(){for(var n=0,e=arguments.length;e>n;n++)o(arguments[n])}}}(window,"pj","pjQueue");

  // Register JSONP handlers
  pj.register('dataSetName')
</script>

Before the closing </body>

<script src="http://example.com/data.json?callback=pjReceive_dataSetName" async defer></script>

NOTE: The JSONP callback must be prefixed with pjReceive_

In the app consuming the data

import { subscribe } from 'preload-json'

subscribe('dataSetName', data => {
  console.log('my lib has the data!', data)
})

Demo

npm run demo
open http://localhost:3000/
Now open your console

Scripts

  • npm run compile - Compiles the module to disk (~/lib).
  • npm run compile:watch - Same as npm run compile but watches files for changes.
  • npm run lint - Lints all files.
  • npm run lint:fix - Lints all files and attempts to fix any issues.
  • npm run test - Runs unit tests.
  • npm run test:watch - Same as npm test but watches files for changes.
  • npm run test:cov - Generates a test coverage report.

Semantic Release

Distribution

Execute one of the following commands

npm version patch -m "Bumped to %s"
npm version minor -m "Bumped to %s"
npm version major -m "Bumped to %s"

FAQs

Package last updated on 24 Feb 2016

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