mediaLoaded

A simple utility for checking whether images, videos and/or video posters have been loaded. Inspired by imagesLoaded.

Sidenote: On touch devices, all videos that don't autoplay will be ignored as video events won't trigger until user interaction.

Install with npm or Yarn:

# via npm
npm install @maeertin/medialoaded

# or Yarn
yarn add @maeertin/medialoaded

Usage:

import mediaLoaded from '@maeertin/medialoaded'

// Single node as target argument
const element = document.querySelector('#container')
mediaLoaded(element, instance => {
  console.log('All media loaded', instance)
})

// nodeList as target argument
const elements = document.querySelectorAll('.post')
mediaLoaded(elements, instance => {
  console.log('All media loaded', instance)
})

// String selector as target argument
mediaLoaded('.post', instance => {
  console.log('All media loaded', instance)
})

Versions

1.2.1

2020-05-15

• Fix faulty factory

1.2.0

2020-05-15

• Add support for IE11

1.1.0

2020-02-07

• Add support for string selector as target argument

1.0.0

2020-01-09

• Add error handling of images and videos