Preload JSON
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">
!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");
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"