Fotorama.io: How do we Lazy Load Images via a Frame Object array?

Question

I have the following code which is working perfectly well for loading images via a frame object array:

localFotorama1.load([
  {img: '1.jpg', caption: '1st image'},
  {img: '2.jpg', caption: '2nd image'},
  {img: '3.jpg', caption: '3rd image'},
  {img: '4.jpg', caption: '4th image'},
  {img: '5.jpg', caption: '5th image'}
]);

I use this after the page is fully initialized, for loading different sized images, based on screen or window width. I simply initialize Fotorama with a small blank image in the HTML, then reload the images dynamically later.

However, I believe this will load all of images right away, as they are "img" tags, so it is probably the equivalent of this:

<div class="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

How do I accomplish the equivalent of the following in a frame object array, for lazy loading on small devices?:

<div class="fotorama">
  <a href="1.jpg"></a>
  <a href="2.jpg"></a>
</div>

I think I'm supposed to use the "html:" tag, and have tried at least the following two methods:

localFotorama1.load([
  {html: '<div><a href="1.jpg"></a></div>', caption: '1st image'},
  ...
]);

and...

localFotorama1.load([
  {html: '<a href="1.jpg"></a>', caption: '1st image'},
  ...
]);

... the only difference between them being a "<div></div>" wrapper around the "<a></a>" tags.

With either attempt above, the page will load Fotorama with the proper number of image frames, but they're empty... with captions included, but no images.

This is the only real clue I have to go on, the frame object spec from the Initialization Page:

{
  img: '1.jpg',
  thumb: '1-thumb.jpg',
  full: '1-full.jpg', // Separate image for the fullscreen mode.
  video: 'http://youtu.be/C3lWwBslWqg', // Youtube, Vimeo or custom iframe URL
  id: 'one', // Custom anchor is used with the hash:true option.
  caption: 'The first caption',
  html: $('selector'), // ...or '<div>123</div>'. Custom HTML inside the frame.
  fit: 'cover', // Override the global fit option.
  any: 'Any data relative to the frame you want to store'
}

Any suggestions?

Thank you!

Answer 1

Just don’t worry, you’re doing well! Lazy-loading working fine when you use load method. See proof-video: http://share.artpolikarpov.ru/1a6w8