Question: How To Display A Loading Animation While Fotorama Loads about fotorama HOT 3 CLOSED

Fotorama has its own preloader, four running dots.

To see it at the very beginning you have to reserve space on the page by specifing dimensions. Also you can see it when you jump to the not-loaded region, for example from 1 to 4 image:

It is by design that the hidden fotorama does not start. Try another way to hide it, something like:

.fotorama {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

The fotorama:ready event always come before any fotorama:load. So If you still want you own preloading animation, use this snippet:

$('.fotorama').on('fotorama:load', function (e, fotorama, data) {
  if (data.index === 0) {
   // The first image has been loaded
  }
});

from fotorama.

Ooookay. I got it now.

Identifying exactly what the issue was was part of the problem. What was happening was, as the anchor/image tags for the navigation thumbnails were being created, the thumbnail images were being displayed to the screen (which was annoying). This is primarily what I wanted to hide.

<div class="fotorama"
        ...
        >
        @foreach (var imageName in Model.ImageNames)
        {
              <a data-full="@Url.Content(Model.FullScreenImagePath + imageName)"
                   href="@Url.Content(Model.CarouselImagePath + imageName)">
                   <img alt="" src="@Url.Content(Model.ThumbnailPath + imageName)" />
              </a>
        }
</div>

Simply hiding those anchor tags as they're being built does the trick. Fotorama seems to subsequently put everything into place after it's ready; no need to manually re-show the anchor tags. And I can still hide my custom .png animation with fotorama's ready event.

.fotorama a
{
    display: none;
}

My apologies. Thank you for the explanations, though.

from fotorama.

You are clever. On fotorama.io I did the similar trick:

.fotorama > * {
  visibility: hidden;
}

.fotorama > .fotorama__wrap {
  visibility: visible;
}

But it is not included to the fotorama.css because I don’t want to break no-javascript compatibility by default. But this is subject to rethink.

from fotorama.