Should lightbox be opened before or after image is loaded?

There is a simple photo gallery:

enter image description here

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

enter image description here

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?

Tags: