question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add a spinner while loading fullsize image

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:1
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jimbluecommented, Jun 13, 2018

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.

1reaction
jimbluecommented, Jun 21, 2018

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') })
Read more comments on GitHub >

github_iconTop Results From Across the Web

Add spinner while new image gets loaded completely
The easiest way might be to set the CSS background-image property of the images to a loading spinner graphic. HTML:
Read more >
Improving the Image Loading Experience
Over time several techniques have been established to help improve how images load on a page, both for speed and to improve the...
Read more >
Loading Image with Glide in Android - Section.io
In this tutorial, we will learn how to use the Glide library to load images either from the internet (URL) or from Drawable...
Read more >
Progressively Loading Images In React | by Malcolm
First, we figure out the aspect ratio of the image. This is calculated by dividing the width by the height. Then we add...
Read more >
The "Blur Up" Technique for Loading Background Images
When the large image is loaded, add a class name that toggles the CSS to use the large image as the background while...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found