Fotorama.io: Как выполнить ленивую загрузку изображений через массив объектов Frame?

У меня есть следующий код, который отлично работает для загрузки изображений через массив объектов фрейма:

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

Я использую его после полной инициализации страницы для загрузки изображений разного размера в зависимости от ширины экрана или окна. Я просто инициализирую Fotorama с небольшим пустым изображением в HTML, а затем динамически перезагружаю изображения позже.

Однако я считаю, что это сразу загрузит все изображения, так как они являются тегами 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'
}

Какие-либо предложения?

Спасибо!


person MateoMaui    schedule 11.04.2015    source источник


Ответы (1)


Только не волнуйтесь, у вас все хорошо! Ленивая загрузка работает нормально при использовании метода load. См. Пруф-видео: http://share.artpolikarpov.ru/1a6w8

person Art    schedule 12.04.2015
comment
Спасибо за быстрый ответ, но я немного запутался ... вы говорите, что ленивая загрузка выполняется автоматически с помощью метода загрузки и тега img? Показания моих ресурсов разработчика не показывают такой же активности ... он показывает все изображения, загруженные с самого начала. Это потому, что я использую эскизы, не объявляя отдельные эскизы изображений? - person MateoMaui; 12.04.2015
comment
Ооо ... теперь я понял. Еще раз спасибо за Ваш ответ! - person MateoMaui; 13.04.2015