asp.net hide display while loading many images

I'm developping a card game. I have an ASP.NET page with some 5开发者_StackOverflow2 small images (the cards), say 300 Kbytes in total.

When the page loads for the 1st time the effect is ugly: User can see each card being loaded in turn. Moreover, only some images are to be displayed after page loads.

Hence the big issue:

I can't make the images hidden from ASP.NET since if hidden they are simply NOT rendered within the "dynamically generated" aspx page!

And of course when I use a js function fired from windows.onload event, then the user will see all the images before I can hide them in javascript!

The dirty way would be to create a Div that would be displayed in front of all other objects since I use absolute positioning.

I'm quite sure you all gurus, you have better ideas!...

If all of the images are enclosed in a single element (say, a div) then you can set its CSS to display: none by default so that even during page rendering it won't show to the user. Then, when all of the content is loaded, display it to the user. Something like this:

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

Now, this makes no guarantees that it won't take a long time for the images to load, resulting in the user not seeing any of them for a while. And if some of them fail to load then I'm not sure what would happen. I imagine the event will still fire once the DOM gives up on trying to load the failed resources.

Naturally, you'll want to style around all of this so that the transition from no images to all images is a smooth user experience. If it takes a few moments then the user may already be interacting with the page when the images suddenly load and move stuff around (I haven't seen your page, so maybe that's not an issue.)

So you'll want to test something like this one a known slow connection or with known broken images to see how it all behaves.

I have a small idea of how such things oftenly done in different jQuery libraries. The idea is to pack all the cards in ONE image and show different patrs of the image by setting this image as a background of the div and change offsets.

Google does so, for instance. Take a look: http://www.google.ru/images/nav_logo83.png This is the elements used at SERP