Should lightbox be opened before or after image is loaded?

Question

There is a simple photo gallery:

Clicking on image opens a dialog with larger version of it:

We can do this in two ways:

First:

1. User clicks on a thumbnail
2. We show loading indicator over the clicked thumbnail (but do not display dialog yet).
3. After large image is loaded - we open the dialog and show the image.

Second:

1. User clicks on a thumbnail.
2. We open the dialog right away with stretched thumbnail that matches size of the large image.
3. After large image is loaded, we add it on top of the stretched thumbnail.

Image loading might take anywhere between 0.1 second and 10 seconds, the gallery might be used on desktop and mobile device.

Which method do you think is better? Or maybe there is another way?

Answer 1

The second approach sounds better. It will not be necessary to display the thumbnail stretched within the Lightbox. Instead a progress spinner or bar will be appreciated. I prefer displaying the size of the file whenever a download is in progress so that the user is aware of the expected time and size.

Answer 2

First

I prefer the first option because I can still see the gallery while I wait for the selected image to appear. Instantly covering the gallery with a large, unrelated placeholder image seems quite jarring to me and interrupts the flow.

Neither experience is ideal, however. Note @DasBeasto's suggestion to use progressive images which will at least show something relevant during load time.

You should also consider ways users might want to browse from one image to the next directly without closing and opening the lightbox.