react-loadqueueloader
Sometimes you want to take the decisions about what to load and when from the browser, but still reap the benefits of queuing and prioritizing that the browser is capable of. A load queue (such as queueup.js) allows you to manage and prioritize loads in just such a way, and this React component allows an easy way of hooking asset loading for components into a load queue.
Basic Usage
var LoadQueueLoader = require('react-loadqueueloader');
// ...
<LoadQueueLoader
src="/path/to/image.jpg"
priority={ 1 }
loader={ React.DOM.img }
/>
While the above example nicely illustrates basic usage, it neglects a crucial piece of the puzzle: the load queue!
Load Queue
When you render the LoadQueueLoader component, you want to do so with a
loadQueue (such as queueup.js) in context (using React.withContext).
For example:
var LoadQueueLoader = require('react-loadqueueloader');
var queue = require('queueup')();
var LoadQueue = React.createClass({
render: function() {
React.withContext({loadQueue: queue}, <div>{ this.props.children }</div>);
}
});
// ...
<LoadQueue>
<LoadQueueLoader src="/path/to/image.jpg" loader={ React.DOM.img } />
</LoadQueue>
Context
| Name | Type | Description |
|---|---|---|
loadQueue |
object | An object that manages loads in a queue. It is expected to have an
enqueue method that takes a function that performs the
load. When the load queue is ready to load an asset, it should call
the provided function, passing it a callback. That callback will be
called when the load completes or errors. |
Props
| Name | Type | Description |
|---|---|---|
loader |
function | A React class or other function that returns a component instance
that loads a src. The instance should also accept
onLoad and onError callbacks. Required. |
src |
string | The URL of the image to be loaded. |
priority |
number | The priority to assign to this load, relative to other loads in the
queue. This prop has no effect if there is no loadQueue
in the component context. Defaults to 0
|
onLoad |
function | An optional callback to be called when the load finishes. |
onError |
function | An optional callback to be called if the load fails. |
