bianco.images-loader

bianco.images-loader

Modern images loader helpers written in es2015 using promises

Usage

Load a single image

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

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

Or also DOM nodes:

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

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...

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

API

Table of Contents

• loadImage
  • Parameters
• loadImages
  • Parameters

loadImage

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

loadImages

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