bianco.images-loader

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

Modern images loader helpers written in es2015 using promises

Usage

#### Load a single image

``js
import { loadImage } from 'bianco.images-loader'

loadImage('path/to/the/image.jpg').then(img => document.body.appendChild(img))
`

Or also DOM nodes:

`js
import $ from 'bianco.query'
import { loadImage } from 'bianco.images-loader'

loadImage($('img.cool'))
.then(img => img.classList.add('loaded'))
.catch(function(error) {
// there was an error loading the image
})
`

#### Load a multiple images

`js
import { loadImages } from 'bianco.images-loader'

loadImages([
'path/to/the/image1.jpg',
'path/to/the/image2.jpg'
])
.then(imgs => imgs.forEach(i => document.body.appendChild(i)))
.catch(error => {
// there was an error loading one of images
})
`

Or also...

`js
import $ from 'bianco.query'
import { loadImages } from 'bianco.images-loader'

loadImages($('img', '.main-content'))
.then(imgs => imgs.forEach(i => i.classList.add('loaded')))
.catch(error => {
// there was an error loading one of images
})
`

[ci-image]:https://img.shields.io/github/workflow/status/biancojs/images-loader/test?style=flat-square
[ci-url]:https://github.com/biancojs/images-loader/actions

[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE.txt

[npm-version-image]: http://img.shields.io/npm/v/bianco.images-loader.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/bianco.images-loader.svg?style=flat-square

[npm-url]: https://npmjs.org/package/bianco.images-loader

API

#### Table of Contents

- loadImage
- Parameters
- loadImages
- Parameters

$3

Preload any image

#### Parameters

- img (string \| HTMLElement) Path to the image or image object

Returns Promise a promise that will be resolved when the image will be completely loaded

$3

Load in parallel a collection of images

#### Parameters

- imgs` (Array \| NodeList) array of strings or HTML elements

Returns Promise a promise that will be resolved when all the images will be loaded