Add a spinner while loading fullsize image
See original GitHub issueHi 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:
- Created 5 years ago
- Reactions:1
- Comments:8 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Lastly to prevent the problem of the first fetch you could create an empty
loaded
array that will be filled asdata-original
source are loaded:This will help not impact performances.
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.You can use it like so: