Sfondo semitrasparente e caricamento pagina

di
Anonimizzato6924
il
3 risposte
/
Anonimizzato6924
Utente anonimizzato

Sfondo semitrasparente e caricamento pagina

Ciao a tutti,
questo è il mio primo messaggio nel forum
Allora spiego subito il mio problema, voglio fare in modo che cliccando su un pulsante la pagina venga "coperta" da uno sfondo semitrasparente e che appaia un'immagine di loading, per intenderci l'effetto lightbox mentre si attende il caricamento di una foto.

Ora prendendo spunto proprio da lightbox, da cui ho estrapolato e modificato alcune funzioni sono riuscita a creare una pagina di esempio (vedi codice in basso), questo però ha un funzionameto quantomeno anomalo che descrivo:
Se metto un alert questo blocca il tutto finchè non lo chiudo. Ma non riesco ancora a capire perchè se tolgo l'alert non si visualizza più l'immagine di loading e il fondo semitrasparente.
Purtroppo non ho possibilità di caricare la pagina di esempio (potete comunque provarla voi in locale).
Vi spiego il comportamento che ottengo:
se lascio l'alert cliccando sul pulsante che imposta la funzione mostra a true il tutto viene eseguito correttamente (o almeno ottengo il comportamento voluto da me tranne per il fatto che compare l'alert) se tolgo l'alert al primo click sulla funzione mostra mi cambia solo il background, ossia lo mette a none eppoi non fa più niente (e non visualizzo neanche errori.

Ora riconosco che io e Javascript siamo all'opposto però neanche mi spiego il perchè di questo funzionamento. Potete aiutarmi? Sicuramente sbaglio qualcosa nel codice ma proprio non riesco ad individuarlo!

Di seguito il codice che potete provare in locale (lo sfondo e il loading usate quelli di lightbox).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">

body {
    background-color:#00CC00;
}

#scurisciPagina {
    width:98%;
    height:98%;
    background:#00CC00;
    z-index:1000;    
}
</style>

<script language="javascript">
    function getPageScroll(){
        var yScroll;
    
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict
            yScroll = document.documentElement.scrollTop;
        } else if (document.body) {// all other Explorers
            yScroll = document.body.scrollTop;
        }
        arrayPageScroll = new Array('',yScroll)
        return arrayPageScroll;
    }
    
    
    function getPageSize(){
        var xScroll, yScroll;
        
        if (window.innerHeight && window.scrollMaxY) {    
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        
        var windowWidth, windowHeight;
        if (self.innerHeight) {    // all except Explorer
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }    
        
        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else {
            pageHeight = yScroll;
        }
    
        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){    
            pageWidth = windowWidth;
        } else {
            pageWidth = xScroll;
        }
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
        return arrayPageSize;
    }
    
    
    function mostra(vero) {
        //SETTO I PARAMETRI PER L'IMMAGINE
        var loadingImage = 'loading.gif';
        var imgPreloader = new Image();
        //SETTO I PARAMETRI PER CENTRARE L'IMMAGINE
        var arrayPageSize = getPageSize();
        var arrayPageScroll = getPageScroll();
        //CREO  E SETTO I TAG IMG E A
        var objLoadingImageLink = document.createElement("a");
        var objLoadingImage = document.createElement("img");
        //RILEVO IL TAG BODY NELLA PAGINA
        var objBody = document.getElementsByTagName("body").item(0);
        //CREO IL DIV CHE CONTERRA' L'IMMAGINE DI LOADING
        var objOverlay = document.createElement("div");
        //SE CLICCO SUL PULSANTE ATTIVO LA FUNZIONE MOSTRA A TRUE
        if(vero == true) {
            //FINISCO DI CREARE E SETTARE IL DIV CHE CONTIENE L'IMMAGINE DI LOADING
            objOverlay.setAttribute('id','overlay');
            objOverlay.style.display = 'none';
            objOverlay.style.position = 'absolute';
            objOverlay.style.top = '0';
            objOverlay.style.left = '0';
            objOverlay.style.zIndex = '1000';
            objOverlay.style.width = '100%';
            //objOverlay.style.color = '#FFFFFF';
            objBody.insertBefore(objOverlay, objBody.firstChild);
            
            //objOverlay.style.left = (screen.width/2) - 10 + "px";
            //objOverlay.style.top = (screen.height/2) - 10 + "px";
            //objOverlay.innerHTML = "Caricamento in corso. Attendere prego.";
                
            //CREO LA FUNZIONE PER IL CARICAMENTO DELL'IMMAGINE DI LOADING
            imgPreloader.onload=function() {
                //FINISCO DI SETTARE IL TAG A    
                objLoadingImageLink.setAttribute('href','#');
                //APPENDO L'OGGETTO COMPLETO (IL DIV)
                objOverlay.appendChild(objLoadingImageLink);
                
                //LO CENTRO NELLO SCHERMO CON QUESTO METODO OPPURE...
                objLoadingImage.style.left = (screen.width/2) + "px";
                objLoadingImage.style.top = (screen.height/2) + "px";
                
                //...UTILIZZO LE 2 FUNZIONI DELEGATE PER QUESTO
                //objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
                //objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');    
            
                //MOSTRO A VIDEO L'OGGETTO COMPLETO
                objLoadingImage.style.display = 'block';
                
                //SETTO L'ALTEZZA DEL DIV CHE CONTINE IL LOADING IN BASE ALLA PAGINA
                objOverlay.style.height = (arrayPageSize[1] + 'px');
                //MOSTRO A VIDEO L'OGGETTO
                objOverlay.style.display = 'block';
                
                //SETTO I PARAMETRI DELL'OGGETTO IMG CHE CONTIENE L'IMMAGINE DI LOADING
                objLoadingImage.src = loadingImage;
                objLoadingImage.setAttribute('id','loadingImage');
                objLoadingImage.style.position = 'absolute';
                objLoadingImage.style.zIndex = '150';
                objLoadingImage.style.border = '0px'
                
                //APPENDO L'OGGETTO COMPLETO (L'IMMAGINE)
                objLoadingImageLink.appendChild(objLoadingImage);
            }
            
            //IMPOSTO L'ATTRIBUTO SER DELL'IMMAGINE DI LOADING
            imgPreloader.src = loadingImage;
    
            //INFINE INSERISCO ALL'ID SCURISCI PAGINA, CONTENUTO NEL BODY, IL FONDO SEMI TRASPARENTE
            document.getElementById('scurisciPagina').style.background='transparent url(overlay.png) repeat';    
    
            //INFINE QUANDO LA PAGINA E' CARICATA RIMUOVO GLI OGGETTI UTILIZZATI PER IL LOADING
            if (document.all) {    // Internet Explorer
                alert("qua");
                objOverlay.style.display = 'none';
                document.getElementById('scurisciPagina').style.background='none';
            } else if (document.layers) {    // Netscape
                //alert("quo");
                objOverlay.style.visibility= 'hidden';
                document.getElementById('scurisciPagina').style.background='none';
            } else if (document.getElementById) {    // Firefox
                alert("qui");
                objOverlay.style.visibility = false;
                objOverlay.style.visibility= 'hidden';
                document.getElementById('scurisciPagina').style.background='none';
            }            
        
        }

    }
    

</script>
</head>

    <body id="scurisciPagina">
    
        <a id="nasco" href="#" onclick="mostra(true);" style="color:#990000">SCURISCI</a>
        
        <DIV>
            testo della pagina
        </DIV>
        
    </body>

</html>

3 Risposte

  • /
    Anonimizzato5333
    Utente anonimizzato

    Re: Sfondo semitrasparente e caricamento pagina

    romyna77 ha scritto:

    Ciao a tutti,
    questo è il mio primo messaggio nel forum
    Allora spiego subito il mio problema, voglio fare in modo che cliccando su un pulsante la pagina venga "coperta" da uno sfondo semitrasparente e che appaia un'immagine di loading, per intenderci l'effetto lightbox mentre si attende il caricamento di una foto.
    [...]
    Se metto un alert questo blocca il tutto finchè non lo chiudo. Ma non riesco ancora a capire perchè se tolgo l'alert non si visualizza più l'immagine di loading e il fondo semitrasparente.
    Ciao, ti do una risposta parziale, che potrebbe darti uno spunto
    A quanto sono riuscito a decifrare (sì, stento a riconoscere i miei codici, figuriamoci gli altri!) mi sembra che, all'evento onclick sul link, partano una serie di operazioni sequenziali, senza controlli temporali di sorta, almeno nello spezzone principale. Mi spiego: dall'inizio della funzione "mostra" vengono creati e modificati oggetti DOM, e infine essi vengono nascosti: 
    objOverlay.style.visibility = 'hidden';
    tutto di seguito, ciò significa che se nulla ferma il processo, alla velocità del lampo l'oggetto comparirà e scomparirà

    Dunque perchè con l'alert si vede, ma quando lo clicchi torna a scomparire?
    Perchè l'alert, finchè attivo, tiene in sospeso il processo Javascript. I messaggi come quello o il confirm (messaggio+Ok/Annulla) si aspettano un valore di ritorno, sempre positivo o condizionale, perciò finchè l'alert è attivo, l'esecuzione si ferma e tu vedi gli elementi DOM appena creati... ma nonappena cliccato Ok, l'esecuzione riprende e gli elementi vengono nascosti. Nascosti, non eliminati, perchè di fatto ci sono! Però non si vedono

    Per quanto mi riguarda, io opterei per una soluzione più legata al CSS che al Javascript (parlo dei metodi che permettono di coprire tutta la pagina) e poi controlli temporali tipo setTimeout o qualcosa causato dal caricamento di un'immagine (come da te ricercato) che ha l'effetto non di nascondere ma di rimuovere gli elementi di preload.

    Se vuoi potrei pensare ad una soluzione, altrimenti vedi se riesci ad accomodartelo da te, sfidati

    Ciao e buona fortuna!
  • /
    Anonimizzato6924
    Utente anonimizzato

    Re: Sfondo semitrasparente e caricamento pagina

    Ciao io vorrei continuare questa soluzione e vorrei anche sfidarmi ma sono 3 giorni che non riesco a risolvere questa cosa...
    Ho cercato di seguire il procedimento di Lightbox, però forse sbaglio a posizionare qualcosa, forse la funzione di fine caricamento della pagina?
  • /
    Anonimizzato5333
    Utente anonimizzato

    Re: Sfondo semitrasparente e caricamento pagina

    romyna77 ha scritto:

    Ciao io vorrei continuare questa soluzione e vorrei anche sfidarmi ma sono 3 giorni che non riesco a risolvere questa cosa...
    Ho cercato di seguire il procedimento di Lightbox, però forse sbaglio a posizionare qualcosa, forse la funzione di fine caricamento della pagina?
    Cose succederebbe se togliessi, temporaneamente, le linee seguenti (che si trovano alla fine dello script)? 
                //INFINE QUANDO LA PAGINA E' CARICATA RIMUOVO GLI OGGETTI UTILIZZATI PER IL LOADING
            if (document.all) {    // Internet Explorer
                alert("qua");
                objOverlay.style.display = 'none';
                document.getElementById('scurisciPagina').style.background='none';
            } else if (document.layers) {    // Netscape
                //alert("quo");
                objOverlay.style.visibility= 'hidden';
                document.getElementById('scurisciPagina').style.background='none';
            } else if (document.getElementById) {    // Firefox
                alert("qui");
                objOverlay.style.visibility = false;
                objOverlay.style.visibility= 'hidden';
                document.getElementById('scurisciPagina').style.background='none';
            }
Devi accedere o registrarti per scrivere nel forum
3 risposte