Question

我在流星中使用滑动滑块，但是在主页上的滑块中加载图像和视频会花费太多时间。在我的主页上，即将发布帖子，每个帖子的视频和图像也在滑块中。但是在花费太多时间进行加载后，该页面崩溃了。这是用于在滑动器滑块中显示帖子视频和图像的代码。

{{#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',
      },
    });
});

Answer 1

我认为这与流星无关。您是否尝试过在Swiper中使用虚拟化组件？您将需要延迟加载额外的幻灯片。如果不是太多，则可以将所有优先级预加载所有优先级。如果有很多，则需要利用延迟负载。查看以下讨论：https://github.com/nolimits4web/swiper/issues/1279。在Chrome开发者工具的“网络”标签中，您看到大量MB被下载了吗？如果您拥有大量资产...的确需要时间。

流星滑动滑块需要时间来加载图像和视频吗？

1 个答案: