Add a spinner while loading fullsize image

Hi there!

Actually when clicking on an image, Zooming doesn’t provide any visual information to let the user know a better resolution image will show when loaded.

This can be a problem on devices with poor connection as users might close the Zoomed image before the full size image is displayed.

To let users know something better is coming, what do you think about adding a div with a css spinner while the full size image is loading.

Thanks for the good work on this awesome library btw 😄 !!

Cheers

[jimblue]

Lastly to prevent the problem of the first fetch you could create an empty loaded array that will be filled as data-original source are loaded:

let loaded = []

if (loaded[imgIndex] === true) {
    onImageLoaded()
} else {
     fetchImage(imgSource).then(() => {
        onImageLoaded()
        loaded[imgIndex] = true
    })
}

This will help not impact performances.

[jimblue]

Hey @kingdido999,

Thanks for the new release! I’ve wrote a promise function to check image load properly. I use it to lazyload image everyday, it’s pretty solid! You can probably improve the new event onImageLoaded with it.

/**
 * Method to fetch image from source
 *
 * @param {URL} imgSource
 * @returns {Promise}
 */
const fetchImage = imgSource => {
  // Return a promise to fetch the image
  return new Promise((resolve, reject) => {
    // Create a new image
    const imgElement = new Image()

    // Define events callbacks
    const loadCallback = () => {
      // Remove events listener
      imgElement.removeEventListener('load', loadCallback)
      imgElement.removeEventListener('error', errorCallback)

      // Resolve Promise
      resolve()
    }

    const errorCallback = () => {
      // Remove events listener
      imgElement.removeEventListener('load', loadCallback)
      imgElement.removeEventListener('error', errorCallback)

      // Reject Promise
      reject(Error(`Error while loading image at ${imgSource}`))
    }

    // Listen to load and error events on image
    imgElement.addEventListener('load', loadCallback)
    imgElement.addEventListener('error', errorCallback)

    // Set image source
    imgElement.src = imgSource
  })
}

You can use it like so:

fetchImage(imgSource).then(() => { console.log('image loaded') })