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

我正在开发一款纸牌游戏。 我有一个ASP.NET页面，里面有52张小图片（卡片），比如说总共300 KB

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

因此，一个大问题是：

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

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

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

---

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

如果所有图像都包含在一个元素中（例如，一个

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>

#图像内容{显示：无；}
//假设jQuery是因为，好吧，来吧
$（文档）.load（函数（）{
$（'#imageContent'）.show（）；
});

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

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

---

因此，您需要测试这样的东西—已知的慢速连接或已知的断开图像—以了解它们的行为。

我对这些事情如何在不同的jQuery库中进行有一点了解。 其思想是将所有卡片打包在一张图像中，通过将该图像设置为div的背景并更改偏移量来显示图像的不同部分

例如，谷歌就是这样做的。看一看: 这是SERP使用的元素