CODEWITHSUNDEEP
c#javascriptasp.net.netonload
Learning
Learning

Reputation: 20011

OnLoad client event for Image control

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.

Upvotes: 1

Views: 7313

Answers (4)

Adrian Iftode
Adrian Iftode

Reputation: 15673

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

Upvotes: 2

Pravin Pawar
Pravin Pawar

Reputation: 2569

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

Upvotes: 0

SouthShoreAK
SouthShoreAK

Reputation: 4296

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

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

Upvotes: 1

Ωmega
Ωmega

Reputation: 43683

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

Upvotes: 3

Related Questions