Owl Carousel - динамическое добавление/удаление элементов

Я интегрирую карусель с совами в приложение для iPad. В карусели может быть 1000 элементов, если пользователь не отфильтрует, какие элементы отображать в карусели.

Чтобы помочь с проблемами производительности и загрузки, в настоящее время у меня есть карусель, начинающаяся всего с 25 элементов, а затем, когда пользователь перемещается по карусели, он динамически добавляет еще 25 элементов в конец карусели. Это происходит всякий раз, когда пользователи доходят до середины карусели до тех пор, пока не останется элементов для добавления.

Проблема, которая происходит сейчас, заключается в том, что все еще есть некоторые проблемы с памятью, когда карусель достигает около 300 изображений. Приложение вылетит.

Я думал, что мне нужно удалить элементы из начала карусели, но я не знаю, как это сделать. Вот пара предостережений:

  • Мне нужно иметь возможность сохранять текущую позицию в карусели, когда элементы добавляются в начало.
  • Карусель должна оставаться в том же порядке, что и начальный массив.
  • Пользователь не должен заметить изменения в карусели, это не может повлиять на UX.

Моя первоначальная мысль заключалась в том, чтобы попытаться сохранить, скажем, 50 элементов в карусели, а затем, когда пользователь перемещается вперед и назад по карусели, добавлять/удалять элементы с любого конца по мере необходимости. Кажется, у меня просто блокировка кодеров, потому что я не понимаю, с чего начать.

Спасибо ребята!


person TroyG    schedule 07.08.2017    source источник


Ответы (2)


Просто используйте одну из функций для ленивой загрузки:

http://www.landmarkmlp.com/js-plugin/owl.carousel/demos/lazyLoad.html

person Wordica    schedule 07.08.2017
comment
На самом деле я использую LazyLoading в приложении, но есть вероятность, что в этой карусели может быть до 12 000 изображений, и это все еще, кажется, увязает / приводит к сбою приложения. Именно по этой причине я рассматриваю эту дополнительную динамическую загрузку/выгрузку элементов. - person TroyG; 07.08.2017
comment
Есть изменение... Вы его тестировали? Ленивая загрузка использует ajax, и она не будет загружать изображения до того, как они появятся. - person Wordica; 08.08.2017
comment
пс. Если вам нужно такое решение для 12 000 элементов с загрузкой/выгрузкой, вам нужно создать свой собственный плагин. Я не знаю ни одного плагина карусели, который будет работать таким образом. Но карусель написать не сложно. - person Wordica; 08.08.2017
comment
Спасибо. Я возьму последнюю версию из репозитория, но я начал это всего две недели назад, поэтому я думаю, что у меня должен быть самый последний код для карусели. Возможно, мне придется попробовать свою собственную карусель, но я надеялся, что мне не придется. - person TroyG; 08.08.2017

Вы можете использовать remove.owl.carousel для удаления элемента из карусели, это не мешает текущему потоку, и пользователь не почувствует никаких изменений в карусели. я сделал это как

$('#owl-carousel').trigger('remove.owl.carousel',0).trigger('refresh.owl.carousel');

здесь 0 — номер элемента, вы можете использовать его при добавлении каждого элемента.

person Haris    schedule 29.10.2017