Can we avoid the preloader for image popup?

Question

Simple scenario:

1. User clicks on the image that opens larger image in lightbox.
2. Translucent dark background appears and image starts loading.

I created a test page for better understanding: http://dimsemenov.com/plugins/magnific-popup/private-test.html

Is preloader required there or not? Will the user be confused by viewing just dark overlay for a few hundred milliseconds until first bytes are fetched and the image starts displaying? Or will it be better to display "Loading..." text in the middle of window? What do you think?

Thank you!

Answer 1

You have two scenarios:

1. You display a preloader and the user understands whats happening

2. You do not display a preloader and there is a short moment of confusion, and if the image is never retrieved because of a server error, the user does not understand the intention of the black box.

I don't see the harm in using a preloader even if it's only shown briefly to most users. At least in the event of an error the user has a basic understanding that something went wrong while loading something, not because of an action the user did.

Answer 2

It is never wrong to user a preloader because whatever happens, users will know what's happening, when it happened and, hopefully, why.

Imagine some of your users have a very bad connection or a very old computer, then they would be quite confused without a preloader. A slow loading of the image would be mistaken as an error and many users could quit the page and never come back.

Answer 3

a few thousand milliseconds

you mean a few seconds? ;)

If you're waiting for an image to load from a server, a loading indicator of some kind is useful here. Internet speeds vary widely across the world and images in lightboxes can be quite large, so clarifying that the app is "working" is important.

Preloading the images on page load so they appear instantly when the lightbox appears would be even better UX!