Fotorama.io：我们如何通过 Frame Object 数组延迟加载图像？

Question

我有以下代码，它非常适合通过帧 object 数组加载图像：

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'}
]);

我在页面完全初始化后使用它，用于根据屏幕或 window 宽度加载不同大小的图像。我只是在 HTML 中用一个小的空白图像初始化 Fotorama，然后稍后动态重新加载图像。

但是，我相信这会立即加载所有图像，因为它们是 "img" 标签，所以它可能等同于：

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

如何在框架 object 数组中实现以下等价物，以便在小型设备上进行延迟加载？:

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

我想我应该使用"html:"标签，并且至少尝试过以下两种方法：

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

和...

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

...它们之间的唯一区别是围绕“<a></a>”标签的“<div></div>”包装器。

通过上述任一尝试，页面将加载具有适当数量图像帧的 Fotorama，但它们是空的...包含标题，但没有图像。

这是我必须继续的唯一真实线索，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'
}

有什么建议吗？

谢谢！

Answer 1

别担心，你做得很好！使用 load 方法时延迟加载工作正常。见证明视频：http://share.artpolikarpov.ru/1a6w8

Fotorama.io：我们如何通过 Frame Object 数组延迟加载图像？

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

javascript

image

loading

lazy-evaluation

fotorama