show defalut small image in datalist before fully bind image in datalist from database

Hi,

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript">
        function EndGetData(arg) {
            document.getElementById("grid").innerHTML = arg;
        }
        setTimeout("<asp:literal runat='server' id='ltCallback' />", 2000);
    </script>
    <div id="grid">
        <div style="position: absolute; top: 70px; left: 70px;">
            <h1>
                <b>Loading......</b></h1>
        </div>
        <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4">
            <ItemTemplate>
                <table border="0" cellpadding="0" cellspacing="0" width="120px">
                    <tr>
                        <td align="center">
                            <asp:Image ID="Image1" ImageUrl='<%# Eval("Value") %>' runat="server" Height="100"
                                Width="100" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
    </div>
</div>

You class must inherit ICallbackEventHandler

public partial class _Default : System.Web.UI.Page, ICallbackEventHandler

C#

private string _Callback;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyItem();
        ltCallback.Text = ClientScript.GetCallbackEventReference(this, "'bindgrid'", "EndGetData", "'asyncgrid'", false);
    }
}

private void BindImages()
{
    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
    List<ListItem> files = new List<ListItem>();
    foreach (string filePath in filePaths)
    {
        string fileName = Path.GetFileName(filePath);
        files.Add(new ListItem(fileName, "~/Images/" + fileName));
    }
    DataList1.DataSource = files;
    DataList1.DataBind();
}

private void BindDummyItem()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("Value");
    int count = DataList1.RepeatColumns == 0 ? 1 : DataList1.RepeatColumns;
    for (int i = 0; i < count * 4; i++)
    {
        dummy.Rows.Add("~/Images/Default/UserImage.png");
    }
    DataList1.DataSource = dummy;
    DataList1.DataBind();
}

public string GetCallbackResult()
{
    return _Callback;
}

public void RaiseCallbackEvent(string eventArgument)
{

    using (System.IO.StringWriter sw = new System.IO.StringWriter())
    {
        BindImages();
        DataList1.RenderControl(new HtmlTextWriter(sw));
        _Callback = sw.ToString();
    }
}

Screenshot