Namespace: Images:loaded

Images:loaded

Source:

Methods

loaded(images, dimensionsNeededopt, nullable) → {Basic.Deferred.<(Image|Array.<Image>)>}

Fixes problems with image "load" events and fires the event even in case the image is already loaded or served from browser cache. So repeated calls to this method on the same loaded image will actually work.

Also supports imgs inside picture elements, while automatically handling the polyfills respimage and picturefill if present in window. Make sure to apply this method to the img inside the picture and not on the picture itself!

Define "dimensionsNeeded" if your definition of "loaded" includes, that the loaded image should already have usable image dimensions for layouting. Use this, if you need to do calculations based on image dimensions after load. Dimensions are determined using the images "naturalWidth".

The function returns a Deferred, which resolves, after the images have loaded, with either an array of loaded images or a single image, if only one has been defined. The Deferred contains all initially given images on the provision property before the Deferred resolves.

Parameters:
Name Type Attributes Default Description
images Image | Array.<Image>

an image or an array of images

dimensionsNeeded Boolean <optional>
<nullable>
false

tells the check if we expect the loaded image to have readable dimensions

Source:
See:
Returns:
a Deferred, resolving after all given images have loaded
Type
Basic.Deferred.<(Image|Array.<Image>)>
Example
loaded(image).then(image => { image.classList.remove('hidden'); });
loaded([image1, image2, image3]).then(images => { alert(`all ${images.length} images have loaded`); })