Solution for delay on loading images

As i was dealing with a legacy site built on a mix of plain html and classic asp framework , i found out that we where nearly out of space on the ISP due to thousand of images uploaded through the years serving a function where the user can select a specific date and that dates image is served .

The solution was obvious . We have to move all or part of the images to another location .

That was the easy part . OK .  I can easily change the tag’s value img src depending on the users selection .

The hard part was that when the image served was locally it appeared with no delay . When it was away ( on another location , another ISP , another domain ) we had a delay opening it .

OK let’s do some tricks . For start find a nice image to show right away to the user while loading  ( here )

Find a way to hide it when the requested  image loads

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script language=”javascript” type=”text/javascript”>
$(window).load(function() {
$(‘#loading’).hide();
});
</script>

Place an image to a respective  div

<div id=”loading”>
<img id=”loading-image” src=”loadanimation.gif” alt=”Loading…” width=”80″ height=”80″ />
</div>

Response.write the canonical image as soon as you know what you have to serve

and finally the magic word .

Response.flush !!!!!!!!!!!!

( According to w3schools the Flush method sends buffered HTML output immediately.)

Works smoothly and fast . Guest see the loading animation until the requested image is ready to be served .

Am i missing something . Yeap a little inline css i used

<style>
#loading {
width: 100%;
height: 100%;
top: 150px;
left: 0px;
margin:auto;
position: fixed;
display: block;
opacity: 0.7;
background-color: transparent;
z-index: 99;
text-align: center;
}
</style>