流星刷卡滑块需要时间来加载图像和视频?

Question

我在 meteor 中使用滑动滑块，但在主页上的滑块中加载图像和视频需要太多时间。在我的主页上，帖子即将发布，每个帖子的视频和图像都在滑块中出现。但是在花费太多时间加载它后，页面崩溃。这是在滑动滑块中显示帖子视频和图像的代码。

{{#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

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