Слайдер Meteor swiper требует времени для загрузки изображений и видео? - PullRequest
Новая
       16

Слайдер Meteor swiper требует времени для загрузки изображений и видео?

0 голосов
/ 16 апреля 2019

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

{{#if imagesArguments}}
<div class="argu-scroller" id="argumentImages" style="border:1px solid #d4d6d8; margin-top:10px;" data-userProfile="{{getImage plaintiff._id}}">
    <div class="swiper-wrapper">
        {{#if meta.thumbnail_url}}
            <div class="swiper-slide swiper-card">
                <div class="evidencecard">
                    <div class="evidencecard-inside">
                        <header>
                            <a href="{{plaintiff_bitlyurl.url}}" target="_blank">
                                <img src="{{meta.thumbnail_url}}" />

                                <div class="text-wrap">
                                    <h2>{{meta.title}}</h2>
                                </div>
                            </a>
                        </header>
                        <main>
                            <div class="info-wrap">
                                <h5><a href="{{plaintiff_bitlyurl.url}}" target="_blank">{{plaintiff_bitlyurl.url}}</a></h5>
                                <!--<p>{{evidenceFull plaintiff_evidence}}</p>-->
                                <p>{{meta.description}}</p>
                            </div>
                        </main>
                    </div>
                </div>
            </div>
        {{/if}}
        {{#each imagesArguments}}
            <div class="swiper-slide swiper-image">
                <div class="argumentimageshome argument2 tem-miniargument">
                    <a data-toggle="modal" data-target="#imageZoomview" class="imgZoom" data-id="{{this}}" >
                        <img class="img-thumbnail" src="{{this}}" />
                    </a>
                </div>
            </div>
        {{/each}}
        {{#each videoArguments}}
            <div class="swiper-slide swiper-video">
                <div class="argumentvideoshome">
                    <div class="video">
                        <video height="150" controls>
                            <source src="{{this}}" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
        {{/each}}
    </div>
</div>
{{/if}}

код для вызова слайдера в файле js 

Template.miniArgument.onRendered(function(){
  var swiper = new Swiper('.argu-scroller', {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
});

1 Ответ

0 голосов
/ 16 апреля 2019

Я думаю, что это не связано с Метеором.Вы пытались использовать компонент виртуализации в Swiper?Вам нужно будет загружать лишние слайды.Если не слишком много, вы можете предварительно загрузить все из них с учетом приоритетов.Если у вас их много, вам нужно использовать ленивую нагрузку.Проверьте это обсуждение: https://github.com/nolimits4web/swiper/issues/1279.Видите ли вы на загружаемой вкладке «Сеть» в инструментах разработчика Chrome много МБ?Если у вас есть огромные активы ... это действительно займет время.

...