Ионный с угловым кирпичным перекрытием

Question

Я работаю над оптимизацией мобильного приложения (созданного с помощью angular1/ionic1) для iPad и столкнулся с проблемами. Я пытаюсь создать эффект двухколоночной кладки, который загружает каждый "элемент карты" (возвращаемый из сетевого запроса) слева направо. Я использую Angular-Masonry, который, кажется, работает очень хорошо локально, но не очень хорошо, когда я тестирую на реальном iPad. Я тестирую на своем iPad Mini 2 (которому около 3 лет), и когда приложение впервые загружается, в течение примерно секунды, все изображения, возвращаемые из стека / перекрытия сетевых запросов друг на друга, до того, как сработает эффект каменной кладки и форматирует так, как я хочу. Приложение также использует ионную бесконечную прокрутку, поэтому, когда пользователи прокручивают страницу вниз, делается еще один сетевой запрос, который возвращает больше "элементов карты". Эти элементы карты также накладываются друг на друга примерно на секунду после первого отображения на странице.

Я чувствую, как будто это может быть проблемой производительности. Я думаю, что причина в том, что Angular Masonry работает очень хорошо локально, и эта ошибка "перекрытия" возникает только при тестировании на моем iPad Mini 2.

У кого-нибудь есть опыт использования Angular-Masonry с Ionic Apps? Я работал над попыткой исправить это в течение нескольких дней и не могу точно определить, что именно идет не так.

Вы можете видеть здесь, где я включаю директивы Angular-Masonry "masonry" к содержащемуся div и "кирпичную кладку" для каждого "элемента карты".

<ion-content class="articleContent" scroll="false">
    <ion-slide-box slide-tabs-scrollable="true" show-pager="false" on-slide-changed="changeSlide(index)" bounce="false" ion-slide-tabs>
        <ion-slide ng-repeat="tab in contents track by $index" ion-slide-tab-label="{{tab.category}}">
            <ion-content>
              <div class="ipadDiv" ng-switch="tablet">
                  <div ng-switch-when="true" column-width="60" masonry load-images="false">
                    <ion-list ng-if="tab.posts.length > 0">
                        <ion-item class="masonry-brick card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
                            <img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
                            <div class="text">
                                <strong ng-bind-html ="::post.title"></strong>
                                <p class="article-date"> {{::postDate(post.date)}}</p>
                            </div>
                        </ion-item>
                        <div ng-if="showInfiniteLoader && tab.posts.length > 0">
                            <ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
                            <ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
                        </div>
                        <br>
                    </ion-list>
                  </div>
                  <div class="masonryDiv" ng-switch-when="false">
                    <ion-list ng-if="tab.posts.length > 0">
                        <ion-item class="card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
                            <img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
                            <div class="text">
                                <strong ng-bind-html ="::post.title"></strong>
                                <p class="article-date"> {{::postDate(post.date)}}</p>
                            </div>
                        </ion-item>
                        <div ng-if="showInfiniteLoader && tab.posts.length > 0">
                            <ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
                            <ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
                        </div>
                        <br>
                    </ion-list>
                  </div>
              </div>
            </ion-content>
        </ion-slide>
    </ion-slide-box>
</ion-content>

Answer 1

Вы используете модуль ImagesLoaded ( https://github.com/desandro/imagesloaded)? Вы хотите убедиться, что все изображения загружены до того, как Masonry пересчитает макет, или у вас возникнет проблема перекрытия, о которой вы упоминали, потому что Masonry нужно знать размер объектов и он не может знать это правильно, пока изображения не будут загружены.

Я сделал полную демонстрацию Ionic v1 + Masonry + imagesLoaded + InfiniteScroll здесь: https://github.com/viking2917/ionicMasonryExample