Resumé

Preload di Immagini con ASP.NET AJAX

Cristian Merighi () 0,00

In questo articolo intendo mostrare come utilizzare la sintassi javascript implementata dagli oggetti ASP.NET AJAX per realizzare un preloader di immagini a runtime da utilizzare all'interno delle vostre pagine HTML.
Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.

Un articolo veloce-veloce per vedere come si possono utilizzare gli enhancements apportati dal client Framework ASP.NET AJAX per mettere in piedi un sistema di preloading à la Adobe® Flash.

Lo scopo è quello di forzare l'apparizione di un'immagine sullo stage solo una volta che la si è completamente caricata, ed utilizzare un segnaposto accattivante nell'attesa che il processo venga portato a termine.

Anche in questo caso il codice che vado a postare è piuttosto semplice e leggibile: si tratta di un paio di oggetti HTML e poche righe di codice javascript "pimped with" AJAX (codice peraltro farcito di commenti tra riga e riga)...

<asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
<img src="" id="img0" alt="" />
<span id="sp0"></span>
<script type="text/javascript">
//<![CDATA[      
    var imgTemp;
    // preparo l'immagine da utilizzare come segnaposto
    // rendendola pronta per intrattenere l'utente non appena necessario...
    var imgLoader = new Image();
    imgLoader.src = "loading.gif";
    // funzione che dà inizio al processo di caricamento
    function loadImage(src){
        $get("img0").src = imgLoader.src;
        imgTemp = new Image();
        $addHandler(imgTemp, "load", onLoad);
        imgTemp.src = src;
    }
    // handler associato all'istanza di imgTemp in caricamento
    function onLoad(evt){
        $get("img0").src = imgTemp.src;
        
        // il seguente codice ha solo propositi di hacking:
        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]);  
        }
    }
    // funzione che parte automaticamente
    // a pagina (body) caricata
    function pageLoad(){
        // chiamata dummy alla funzione di loading
        loadImage("1.jpg");
    }
//]]>       
</script>

Take care. Bye.

feedback
 

Syndicate

Autore

Cristian Merighi facebook twitter google+ youtube

Ultimi articoli

Top rated

Archivio

Dove sono?

Autore

Cristian Merighi facebook twitter google+ youtube

Le mie letture

Feeds