Question

我正在开发纸牌游戏。我有一个带有52个小图像（卡片）的ASP.NET页面，总共300 K字节。

当第一次加载页面时效果很难看：用户可以看到每张卡依次加载。此外，页面加载后只显示一些图像。

因此这个大问题：

我无法使图像隐藏在ASP.NET中，因为如果隐藏它们只是不在“动态生成的”aspx页面中呈现！

当然，当我使用从windows.onload事件触发的js函数时，用户将在我可以在javascript中隐藏它们之前看到所有图像！

脏的方法是创建一个Div，它将显示在所有其他对象的前面，因为我使用绝对定位。

我很确定你们都是大师，你们有更好的想法！...

Answer 1

如果所有图像都包含在一个元素中（例如，div），则默认情况下可以将其CSS设置为display: none，这样即使在页面渲染过程中也不会显示用户。然后，当加载所有内容时，将其显示给用户。像这样：

<style type="text/css">
  #imageContent { display: none; }
</style>
<div id="imageContent">
  <!-- your images are here -->
</div>
<script type="text/javascript">
  // assuming jQuery because, well, come on
  $(document).load(function() {
    $('#imageContent').show();
  });
</script>

现在，这并不能保证图像加载不会花费很长时间，导致用户暂时看不到任何图像。如果其中一些未能加载，那么我不确定会发生什么。我想，一旦DOM放弃尝试加载失败的资源，事件仍然会激活。

当然，您需要围绕所有这些进行设计，以便从无图像到所有图像的过渡是一种流畅的用户体验。如果需要一些时间，那么当图像突然加载并移动时，用户可能已经在与页面进行交互（我没有看到您的页面，所以可能这不是问题。）

因此，您需要测试类似于已知慢速连接或已知损坏图像的内容，以了解它的行为方式。

Answer 2

我对如何在不同的jQuery库中经常完成这些事情有一个小小的想法。我们的想法是将所有卡片打包成一张图像，并通过将此图像设置为div的背景并更改偏移来显示图像的不同图像。

例如，Google会这样做。看一看： http://www.google.ru/images/nav_logo83.png 这是SERP使用的元素

asp.net在加载许多图像时隐藏显示

2 个答案: