cosa posso inserire prima del caricamento?

Question

Mi piacerebbe avere un effetto di animazione che inizia quando le persone lasciano una pagina.

Io uso questo momento:

window.onbeforeunload = function(){ 
    alert("test"); 
    console.log("test"); 
    sliderIntervalId = setInterval('SlideDown()',1); 
} 

Mentre il "test" è infatti registrato alla console, la funzione né slideDown né l'avviso di prova viene prodotto ...

È normale ? possiamo usare la funzione beforeunload solo per scopi di back-end?

P.S. Sto testando su chrome, è per questo che ho dovuto usare onbeforeUnload i.s.o onUnLoad che sembra non essere supportato da Chrome?

Answer 1

onbeforeunload può ritardare la pagina di scarico in una sola caso: quando viene restituita una dichiarazione return con un valore definito. In questo caso, l'utente riceve una finestra di conferma, che offre all'utente un'opzione per non uscire dalla pagina.

Il risultato desiderato non può essere forzato in alcun modo. L'animazione verrà eseguito fino a quando il browser viene avviato il caricamento della pagina successiva:

[User] Navigates away to http://other.website/ 
[Your page] Fires `beforeunload` event 
[Your page] `unload` event fires 
[Browser] Received response from http://other.website/ 
[Browser] Leaves your page 
[Browser] Starts showing content from http://other.website/ 

Answer 2

Jorrebor, Se il vostro cercando di avere questo fuoco animazione quando lasciano il tuo sito o chiudere il browser non funzionerà come previsto. Tuttavia, puoi creare questa animazione mentre l'utente viaggia all'interno del tuo sito rimuovendo la proprietà 'href' dei tuoi collegamenti e creando animazioni con una funzione di callback che imposta la proprietà window.location. Qualcosa di simile:

document.getElementById('home').onclick(function(){ 
    yourAnimationFunction(function(){ 
      window.location="example.com"; 
    }); 
}); 

un sacco di lavoro e di solito essere SEO friendly però

Answer 3

sto lavorando con onbeforeunload e che cosa ero in grado di capire è:

• gestore onbeforeunload sta bloccando il browser da distruggere la pagina corrente
• se non si restituisce nulla, il popup non viene visualizzato.

Quindi il codice funzionerà finché il gestore eventi verrà eseguito. Ciò significa che le funzioni del timer non sono utilizzabili. Aggiungono solo alla coda di esecuzione, quindi tutto ciò che farebbe è essere accodato dopo il alla fine del gestore attualmente in esecuzione, che è dopo l'ultimo istante in cui si è garantito che il codice è ancora in esecuzione.

Quindi non v'è un solo modo per fermare il browser di scarico prima del termine di animazione:

• messo un anello di bloccaggio che spreca tempo nel gestore beforeunload
• inizio CSS3 animazione impostando una classe appropriata sull'elemento prima del ciclo
• rendono fine ciclo quando le finiture animazione (rendono il loop controllare l'altezza effettiva di un elemento o qualcosa)

Oh, e sì, questo è un trucco più brutto di tutti, ma sono stato in grado di trovare un modo per impedire al browser di scaricare la pagina, giusto?

Gradirei commenti con idee su cosa mettere nel ciclo. Sto prendendo alcune opzioni in considerazione:

• sprecare CPU sulla matematica dai grandi numeri
• accesso localStorage (chiamata sincrona, IO operration)
• accesso DOM (questa soluzione è già a)

Qualche idea?

Answer 4

Supponendo jQuery per brevità:

$('nav a').click(function (e) { 

    //ignore any "modified" click that usually doesn't open in the current window 
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) { 
     return; 
    } 

    //where you going here? 
    var place = this.href; 

    //you're not going anywhere, buddy 
    e.preventDefault(); 

    //watch me dance, first 
    $('.animate-me').fadeOut(1000, function afterAnimation() { 

     //you're free to go! 
     document.location = place; 
    }); 
}); 

In sostanza, non si utilizza onbeforeunload. Un vantaggio è che puoi mantenere l'utente per tutto il tempo che vuoi, uno svantaggio è che l'utente non vedrà un'animazione quando usa un link all'esterno nav (ma puoi semplicemente cambiare il selettore)

Ovviamente mantieni l'animazione veloce, come suddenlyoslo.com fare.