Угловой пользовательский интерфейс с изображениями

Я пытаюсь отобразить список {значок флага страны + имя + код набора телефона}, я использовал ui-select для реализации этого в angular, это код, который я использовал

<ui-select ng-model="viewModel.homePhoneCountryCode" theme="bootstrap" id="homePhoneCountryCode" name="homePhoneCountryCode" ng-disabled="disabled">
    <ui-select-match>
        {{$select.selected.phoneCode}}
    </ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
        <img ng-src="{{country.imageUrl}}" />
             <span ng-bind-html="country.name | highlight: $select.search"></span>
             <span ng-bind-html="country.phoneCode | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

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

В списке около 236 элементов, значки флагов взяты с http://www.famfamfam.com/lab/icons/flags/ относительно небольшого размера

Другая проблема заключается в том, что время от времени, когда текст вводится в поле поиска/фильтра, страница, кажется, застревает с сообщением, указывающим на то, что причиной является длительная работа js.

Вопрос 1: Это правильный способ отображения удаленных изображений в списке.

Вопрос 2: Есть ли способ ленивой загрузки в ui-select.

Вопрос 3: Если это какая-то проблема с ui-select, есть ли другой вариант, который я мог бы изучить, который работает с angular.


person Abhilash    schedule 30.04.2016    source источник


Ответы (2)


Хотя я лично не сталкивался с этой проблемой, я проверил, были ли какие-либо проблемы в репозитории angular для того, что вы описываете. Я наткнулся на эту ссылку и, похоже, проблема с производительностью пользовательского интерфейса -выберите выбор и много изображений. По словам @askhogan:

Я считаю, что проблемы с производительностью связаны с механизмом ng-repeat в директиве ui-select-choices. Я закомментировал этот участок кода, и приложение снова стало реагировать. Похоже, что раскрывающийся список вариантов выбора обрабатывается немедленно, а не при нажатии на него. Если у вас есть (несколько вариантов * несколько полей поиска select-ui) на одной странице, это значительно замедлит загрузку страницы. Я считаю, что решение состоит в том, чтобы отложить обработку раскрывающегося списка до тех пор, пока не будет нажато окно поиска select-ui, но я все еще исследую...

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

person SimonStern    schedule 30.04.2016
comment
хм, да, только что наткнулся на эту ссылку, похоже, нужно перейти на github.com/machineboy2045/angular-selectize будет хорошим вариантом - person Abhilash; 01.05.2016

Вопрос 2: Только для ленивой загрузки изображений. Я использовал карусель начальной загрузки, и у меня была проблема с ленивой загрузкой массива изображений. Что я сделал, так это создал 2 разных массива: один с текущими 3 изображениями и второй со всеми другими существующими изображениями. в первом массиве я загружаю только 3 изображения, и при каждом нажатии кнопки «Далее» или «Извращение» я брал другое изображение из второго массива и заменял его первым массивом (надеюсь, я был достаточно ясен).

person the scion    schedule 30.04.2016
comment
да, это может работать с каруселью, но я боюсь, что мне придется придерживаться списка выбора - person Abhilash; 01.05.2016