(Mad Basic Loader) loads dom images
MBL gives better control over image loading in the browser. Images can be loaded all at once or sequentially, they can be rendered as an image or set as the background image of an element. Callbacks/events are fired once image loading begins, as each image succeeds or fails, and once all images have loaded.
Built on top of imgload for simple image loading events.
MBL is meant to be consumed in a CommonJS, Browserify environment (though you can also use a pre-bundled version, more below):
npm install mbl
Example HTML
<img data-src="image.jpg" data-mbl>
<img data-src="other.jpg" data-mbl>
Javascript
// require
var mbl = require('mbl')
// gather some images
var images = document.querySelectorAll('[data-mbl]')
// setup
var imageload = mbl(images)
// start!
imageload.start()
You can get more specific if you want (the following are defaults):
var imageload = mbl(images, {
sourceAttr : 'data-src' // attribute containing image source
sequential : false, // sequential mode (details below)
mode : 'src', // mbl mode (details below)
success : function(elem) { }, // on each image load
error : function(elem) { }, // on each image error
begin : function() { } // once loading begins
complete : function() { } // once all images have completed
})
Events are also triggered along with the callbacks. Bind to events like so:
imageload.on('success', function(data) {
// triggered on each image successful load
})
imageload.on('error', function(data) {
// triggered on each image error
})
imageload.on('begin', function() {
// triggered when loading begins
})
imageload.on('complete', function() {
// triggered when all images have completed
})
Example HTML from above:
<img data-src="image.jpg" data-mbl>
<img data-src="other.jpg" data-mbl>
after MBL completes (assuming success) DOM becomes:
<img data-src="image.jpg" src="image.jpg" data-mbl-complete>
<img data-src="other.jpg" src="other.jpg" data-mbl-complete>
If sequential
is set to true, the images are loaded sequentially, one by one. Each image waits for the prior to complete (success or error) before beginning to load. Handy when a linear load sequence is desired, or load throttling for some other reason:
<img data-src="image.jpg" data-mbl>
<img data-src="other.jpg" data-mbl> // waits for image.jpg
<img data-src="third.jpg" data-mbl> // waits for other.jpg
// etc...
Mode | Behavior |
---|---|
src |
source of the loaded image is set as the src attribute |
background |
source of the loaded image is set as the background-image style attribute |
load |
no DOM changes, but callbacks/events fired |
This setting is handy for responsive images using background-size: cover;
<span data-src="image.jpg" data-mbl></span>
<span data-src="other.jpg" data-mbl></span>
after MBL completes (assuming success) with mode: background
DOM becomes:
<span
data-src="image.jpg"
style="background-image:url('image.jpg');"
data-mbl-complete
></span>
<span
data-src="other.jpg"
style="background-image:url('other.jpg');"
data-mbl-complete
></span>
The mode can also be changed on an element basis by adding an attribute to the element:
<img
data-src="image.jpg"
data-mbl-mode="src|background|load"
>
If you don't want to mess with a build process you can also include the pre-bundled version found in dist/mbl.bundled.js
in your project which exposes mbl()
globally.
There's still an old jQuery version of MBL in dist
as well. This hasn't been maintained but it's there for tinkering. Usage is:
var mbl = require('mbl/jquery.mbl.js'); // or just include as a script tag
$('[data-mbl]').mbl({
'sequential' : false,
'bgMode' : false,
'success' : function(index, elem) { },
'error' : function(index, elem) { },
'begin' : function() { }
'complete' : function() { }
})