Crunch Mode Blog - A State of Mind by Developers at D2Soft Technologies

Like us on Facebook

How to enable a button after image load event using JavaScript in ASP.NET

In my ASP.NET code (using C#), I wanted to enable a button only after an image was fully loaded.  The button would be clickable after the image's "onLoad" event call would be done.

To do this, first disable your button in your C# server-side code.  In your image, add this line of code:

    MyImage.Attributes["onLoad"] = "onLoadImage(this)";

The onLoadImage() is a JavaScript function.  You define the function in the head section of your ASP.NET page:

    <script type="text/javascript">
        function onLoadImage(img) {
            $('#<%= MyButton.ClientID %>').prop("disabled", false);

This will enable the button once the image is fully loaded.

The only problem with this code is that it will not work in IE if the image is already in the browser's cache.  For some reason, the JavaScript image load even is not fired for a cached image.  This means that the first time you load the image in IE, the code works.  However, reloading the page will not fire up the code to enable the button.  Unfortunately, my research didn't find a working solution.