Preload.io loader for images
npm i -S preload.io-image
Image requires a few polyfills to work everywhere, to give some flexibility they are not included by default.
npm i -S whatwg-fetch regenerator
import 'regenerator/runtime'
import 'whatwg-fetch'
Regenerator
is currently a requirement for the async stuff, but a version is included with babel-polyfill
so if you’re using that then you’re good to go. Use whichever version of fetch
you like, if necessary.
There will be a fairly obvious console error logged if these are omitted.
Install preload.io and register the image loader with it
import Preloader from 'preload.io'
import { EVENTS } from 'preload.io'
import ImageLoader from 'preload.io-image'
let preloader = new Preloader()
preloader.register( new ImageLoader() )
Then load the resource and it’ll be preloaded by the browser and cached
preloader.load( '/assets/avatar.jpg' )
The ImageLoader
will match on jpg
, jpeg
and png
resources.
ImageLoader
uses fetch
to preload the resource, options you supply will be passed to fetch
, in this order of precedence:
preloader.load({
resource: 'image.jpg',
options: {
mode: 'no-cors'
}
})
const imageLoader = new ImageLoader({
mode: 'no-cors'
})
const preloader = new Preloader({
mode: 'no-cors'
})
The blob returned by fetch when grabbing an image can also be processed if you really need to but this is done at instantiation for all resources loaded with the loader (although there is nothing stopping you instantiating multiple image loaders)
preloader.register( new ImageLoader({
blob: true
}))
let id = preloader.load( '/assets/user.jpg' )
preloader.on( EVENTS.LOAD, event => {
if ( event.id === id ) {
let image = new Image()
let urlCreator = window.URL || window.webkitURL
let imageURL = urlCreator.createObjectURL( event.res )
image.src = imageURL
document.body.appendChild( image )
}
})
The blob instantiation parameter will return the blob with the load event, or you can search for it from all of the responses on the load complete event.