How can i display "Loading..." when repeater gets data

Question

I have a data repeater in ASP.NET page. It loads lots of stuff and its taking 4 - 5 seconds to display images. I can' t page or get a part of items i need to display all of the data so i need a loading message or gif but how can i do that? Can anyone help me?

Thanks

Answer 1

If your scenario is not ajax one (classic form postback or browser is redirected by link-click) I'd insert animated gif into html layout just before redirection / post back (hidden div is shown or something like that). AFAIK this approach will have problems with old-day-browsers (animation will be frozen)

Another approach is called page-processor?. Browser is redirected to intermediate page that shows animation while page requested is loaded.

You can also send javascript code from server (Response.Write / Response.Flush) that will animate your current page.

I also advise to block/hide UI control such as "send form" to deny impatient user click twice if server is responding too long.

Answer 2

Use an iframe. Essentially you can open a slow running page in an iframe and use the events raised by the iframe to display a loading image.

<script type="text/javascript"> 

var t;

//on iframe state change display or hide the loader tag
function readyStateChanged(state)
{
    if (state == 'complete' || state == 4 || state == '4' || state == 'Complete')
    {
        //hide the loader
        document.getElementById('loader').style.display = 'none';
        clearTimeout(t);

    } else
    {
        //diaplay the loader
        document.getElementById('loader').style.display = '';

        //hide the loader if the iframe never loads
        t = setTimeout("hideLoader()", 5000);
    }
}


//hide the loading tag
function hideLoader()
{
    document.getElementById('loader').style.display = 'none';
    clearTimeout(t);
}    
</script>


<div id="loader" style="display: none;"><img />loading...</div>

<iframe id="frameX"  src="your_page.aspx" width="100%" height="400px" onload="hideLoader();" onreadystatechange="readyStateChanged(this.readyState);" ></iframe>