我有以下代码，它非常适合通过框架对象数组加载图像：
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'}
]);
我在页面完全初始化后使用它，根据屏幕或窗口宽度加载不同大小的图像。我只是用 HTML 中的一个小空白图像初始化 Fotorama，然后稍后动态重新加载图像。
但是，我相信这会立即加载所有图像，因为它们是“img”标签，所以它可能相当于：
<div class="fotorama">
<img src="1.jpg">
<img src="2.jpg">
</div>
如何在框架对象数组中完成以下等效操作，以便在小型设备上进行延迟加载？：
<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'},
...
]);
...它们之间的唯一区别是“”标签<div></div>周围的“”包装<a></a>。
通过上述任一尝试，页面将加载具有适当数量的图像帧的 Fotorama，但它们是空的……包含标题，但没有图像。
这是我必须继续的唯一真正线索，初始化页面中的框架对象规范：
{
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'
}
有什么建议么？
谢谢！