流星划线器滑块花时间加载图像和视频？

Question

我在流星中使用滑动滑块但是在主页上的滑块中加载图像和视频需要花费太多时间。在我的主页上，帖子即将发布，每个帖子的视频和图片都会出现在滑块中。但是在花了太多时间加载它后会崩溃页面。这是在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',
      },
    });
});

Answer 1

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