Resumé

Preload Images with ASP.NET AJAX

Cristian Merighi () 0.00

In this short article I'll show how to use the enhanced javascript syntax that comes with ASP.NET AJAX to realize a runtime images preloader for your HTML pages.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

A quick article to show how to exploit ASP.NET AJAX handlers in order to preload images à la Adobe® Flash.

The goal is to force an image to appear on the stage only when it has been fully downloaded, and using a placeholder image that entertains the user til the process is over.

Once again the code is pretty straightforward: it's a couple of ASP.NET AJAX enhanced javascript code lines and same amount of markup objects.
The comment provided should help for the rest...

<asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
<img src="" id="img0" alt="" />
<span id="sp0"></span>
<script type="text/javascript">
//<![CDATA[      
    var imgTemp;
    // getting the fully responsive
    // image that entertains during the loading...
    var imgLoader = new Image();
    imgLoader.src = "loading.gif";
    // function that triggers the load process
    function loadImage(src){
        $get("img0").src = imgLoader.src;
        imgTemp = new Image();
        $addHandler(imgTemp, "load", onLoad);
        imgTemp.src = src;
    }
    // handler added to the load event of the imgTemp's instance
    function onLoad(evt){
        $get("img0").src = imgTemp.src;
        
        // just for hacking purposals:
        var spn = $get("sp0");
        spn.innerHTML = "";
        for (var child in evt){
            spn.innerHTML += String.format("{0}: {1}<br />", child, evt[child]); 
        }
        spn.innerHTML += "*************************<br />";
        for (var child in evt.rawEvent){
            spn.innerHTML += String.format("{0}: {1}<br />", child, evt.rawEvent[child]);  
        }
    }
    function pageLoad(){
        // dummy call to the loader
        loadImage("1.jpg");
    }
//]]>       
</script>

Take care. Bye.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds