我有一个网络应用程序，其中列出了很多电影，现在我为每个电影加载一个缩略图，但是当电影列表非常小时，页面会继续加载和加载。所以，我正在考虑向用户提供2个视图：缩略图视图和列表视图（这个用于加快加载速度）。
那么，我必须选择哪些选项？我问这个问题是因为有一些话题需要考虑：
1.我可以制作2个视图并隐藏其中一个（listview或thumb），但是，如果用户选择列表视图，我该如何防止页面加载隐藏的图像？ （或者我应该以这种方式离开？） 2.-有2个面板（每种观点一个）并且只是隐藏一个节目是好的吗？或通常是如何完成的？
我想让它变得非常干净，易懂和优化。谢谢
答案 0 :(得分：1)
一种解决方案是使用常规 <div class="container">
<h1 class="text-center">Upcoming Events and Training</h1>
<div class="row" style="width: 70%; margin: 0 auto;">
@if (Model.CDSContent != null)
{
foreach (var item in Model.CDSContent)
{
<div class="col-md-12" style="border: 1px solid #dfdfdf; height: 100px; background-color: #f5f5f5; padding: 20px;">
<div class="row" style="height:100%;">
<div class="col-md-3 col-xs-12" style="height: 100px; font-size: 1.5em; padding-top: 15px;">@Html.Raw(item["eventsdate"])</div>
<div class="col-md-9 col-xs-12"><a href="@Html.Raw(item["eventsattachment"])" target="_blank">
<h3>@Html.Raw(item["eventstitle"])</h3>
<p>Click here to find out more.</p>
</a></div>
</div>
</div>
}
}
</div>
</div>
标记，并在某些情况下将其转换为列表，例如用户选择将其显示为列表或加载过多（或任何给定JavaScript条件）：
<img>我创造了一个演示这个here的小提琴。
请注意，这可以通过定位DOM元素本身来实现，因此在将图像转换为链接之前，它实际上不需要等待图像完成加载。
希望这有帮助！