import ImageLoader from 'beloader/src/loaders/ImageLoader.js'

public class | version 1.0.0 | since 1.0.0 | source

ImageLoader

Extends:

AbstractEventManager → AbstractLoader → ImageLoader

If loaded async, the response will be added as a blob reference in src unless an option base64 set to true is provided. In that case, the image will be parsed as a DataURI.

Image loader also accepts a attributes option to customize resulting HtmlElement.

The resulting HtmlElement will not be inserted in DOM but provided as a image property of the parent QueueItem. The property will be available as soon as loader will be available to permit DOM insertion at creation. It can be retrieved with the loaderReady promise exposed by QueueItem.

Example:

 var loader = new Beloader();

 // Sync mode with display only when loaded
 var img = loader.fetch('img', {
   url: 'http://myserver.com/image.jpg',
   async: false,
   attributes : {
     alt: 'My image',
     width: '100px',
     height: '100px'
   }
 }).then(item => {
   document.body.appendChild(item.image);
 });

 // Async mode with display only when loaded (as a blob object)
 var img = loader.fetch('img', {
   url: 'http://myserver.com/image.jpg',
   attributes : {
     alt: 'My image',
     width: '100px',
     height: '100px'
   }
 }).then(item => {
   document.body.appendChild(item.image);
 });

 // Async mode with display only when loaded (as a DataURI string)
 var img = loader.fetch('img', {
   url: 'http://myserver.com/image.jpg',
   base64: true,
   attributes : {
     alt: 'My image',
     width: '100px',
     height: '100px'
   }
 }).then(item => {
   document.body.appendChild(item.image);
 });

Constructor Summary

Public Constructor
public	constructor(parent: QueueItem, options: DotObjectArray)	version 1.0.0 since 1.0.0

Member Summary

Public Members
public get	node: HTMLElement Getter that generates HTMLElement to contain image (sync or async)	version 1.0.0 since 1.0.0

Private Members
private	_node: HTMLElement Underlying node for insertion

Method Summary

Public Methods
public	async(): Promise Load image binary (blob) or dataUri (base64) and update src attribute	version 1.0.0 since 1.0.0
public	sync(): Promise Load image	version 1.0.0 since 1.0.0

Private Methods
private	_loadstart() Event hook to add specific Blob request headers to XMLHttpRequest instance	version 1.0.0 since 1.0.0

Inherited Summary

From class AbstractEventManager
private	_events: DotObjectArray Callback's list by eventName	since 1.0.0
public	fire(eventName: string, target: Beloader \| QueueItem \| Loader \| Plugin, data: object \| array \| number \| string) Fire an event	version 1.0.0 since 1.0.0
public	on(eventName: string, callback: Function) Register events callbacks after instance creation	version 1.0.0 since 1.0.0
private	_dispatch(event: BeloaderEvent) Dispatch an event	version 1.0.0 since 1.0.0

From class AbstractLoader
public get	promise: Promise Loader promise	version 1.0.0 since 1.0.0
public	options: DotObjectArray Loader options	since 1.0.0
public	parent: QueueItem Requesting parent item	since 1.0.0
private	_plugins: DotObjectArray Map plugins	since 1.0.0
public abstract	async(): Promise The async method relies on fetching content with an XHR request and inserting it inline in the document, wrapped in right HTML container if needed	version 1.0.0 since 1.0.0
public abstract	sync(): Promise The sync method mostly relies on adding an HTMLElement to the DOM to load asset.	version 1.0.0 since 1.0.0

Public Constructors

public constructor(parent: QueueItem, options: DotObjectArray) version 1.0.0 since 1.0.0 source

Constructor

Override:

AbstractLoader#constructor

Params:

Name	Type	Attribute	Description
parent	QueueItem		Calling QueueItem
options	DotObjectArray		Options for the loader
options.url	string		URL of the asset
options.base64	boolean	optional default: false	If set to `true` and loaded async, the asset will be parsed as a base64 data string. Otherwise, it will be parsed as binary blob
options.attributes	Object	optional	Attributes for the resulting HTML node