Question

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.

Answer 1

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 comments

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)";
             }
          }
       }