Hi,

You can simply set the deault image path,after getting data from database set path that you got from database.

suppose i have  10 rows in datalist thn how to do disply 10 small default image before bind 10 large image fully?

Please refer below link

Load images while scrolling page down with jQuery AJAX in ASP.Net

In this on page load Dummy Data is binded to Datato DataList.

 i have simple datalist ,how can i add in this code?

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

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        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();
    }
}

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