https://github.com/jongacnik/mbl

(Mad Basic Loader) loads dom images
https://github.com/jongacnik/mbl

Last synced: about 1 year ago
JSON representation

(Mad Basic Loader) loads dom images

• Host: GitHub
• URL: https://github.com/jongacnik/mbl
• Owner: jongacnik
• Created: 2014-08-18T03:13:29.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2017-02-17T02:37:13.000Z (over 9 years ago)
• Last Synced: 2025-03-16T20:05:01.492Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 39.1 KB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# MBL (Mad Basic Loader)

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](https://www.npmjs.com/package/imgload) for simple image loading events.

## Getting Started

MBL is meant to be consumed in a [CommonJS](http://www.commonjs.org/), [Browserify](http://browserify.org/) environment (though you can also use a pre-bundled version, more below):

	npm install mbl

## Usage

**Example HTML**

	

	

**Javascript**

	// require

	var mbl = require('mbl')

	// gather some images

	var images = document.querySelectorAll('[data-mbl]')

	// setup

	var imageload = mbl(images)

	// start!

	imageload.start()

### Options

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

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

	})

## What happens to the DOM

Example HTML from above:

	

	

after MBL completes (assuming success) DOM becomes:

	

	

## More about options

### Sequential

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:

	

	 // waits for image.jpg

	 // waits for other.jpg

	// etc...

### Loading Mode ( src | background | load )

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;`

	

	

after MBL completes (assuming success) with `mode: background` DOM becomes:

	

	

The mode can also be changed on an element basis by adding an attribute to the element:

	

## Bundled Version

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.

## jQuery

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() { }

	})

## Todo

- Sequential image throttling

- Pause / resume sequential loads

- Tests