I need to bind client side onLoad event with ASP.Net Image control. I have tried it for quite some time with no success.

Function Name onload="onLoadFunction(this)"

Script:

function onLoadFunction(img) {
     $(img).css("visibility", "visible"); // Using jQuery
     // img.style.visibility = "visible"; // Using just javascript.
 }

Markup:

<asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP" border="0" ImageUrl="hello.jpg" OnLoad="onLoadFunction(this)" />

It is not working for me i would appreciate if someone can help me with this.

I need to bind client side onLoad event with ASP.Net Image control. I have tried it for quite some time with no success.

Function Name onload="onLoadFunction(this)"

Script:

function onLoadFunction(img) {
     $(img).css("visibility", "visible"); // Using jQuery
     // img.style.visibility = "visible"; // Using just javascript.
 }

Markup:

<asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP" border="0" ImageUrl="hello.jpg" OnLoad="onLoadFunction(this)" />

It is not working for me i would appreciate if someone can help me with this.

• c#
• javascript
• asp
• onload

• This is actually related to my previous question stackoverflow./questions/10227254/… – Learning Commented Apr 22, 2012 at 4:12
• If you check the link in my last ment you will get the plete picture.. – Learning Commented Apr 22, 2012 at 4:13

4 Answers 4

$("img #xyz").bind("load", function () { $(this).css("visibility", "visible"); });

The OnLoad attribute is used to add an event handler the Load event, which is a server side event, not client side.

If you want create the onload attribute of the generated image element, you need to use Attributes collection

imgTopFourImg2.Attributes["onload"] = "onLoadFunction(this)";

EDIT from ments

Since the image is inside a repeater item this is not available in code behind. Handle ItemDataBound event:

void R1_ItemDataBound(Object Sender, RepeaterItemEventArgs e) {

          // This event is raised for the header, the footer, separators, and items.

          // Execute the following logic for Items and Alternating Items.
          if (e.Item.ItemType == ListItemType.Item 
                  || e.Item.ItemType == ListItemType.AlternatingItem) 
             {

                var imgTopFourImg2 = e.Item.FindControl("imgTopFourImg2") as Image;
                if (imgTopFourImg2 != null)
                    imgTopFourImg2.Attributes["onload"] = "onLoadFunction(this)";
             }
          }
       }  

$("#imgTopFourImg2").bind("load", function () { $(this).show(); });

It's worth looking into the show() and hide() methods, since you're already using jQuery.

$("img #id").bind("load", function () { $(this).css("visibility", "visible"); });