jQuery: Safari e il problema della priorità delle azioni con le animazioni

Safari ha un modo particolare di gestire la priorità delle azioni quando si usano le animazioni jQuery.

Partiamo da questo esempio:

$( ".with-preloader" ).click(function() {
    $( "#loader" ).fadeIn();
    window.location = $( this ).attr( "href" );
    return false;
});

Tutti i browser mostreranno il loader e quindi caricheranno la nuova pagina indicata dall'URL del link. Tutti ad eccezione di Safari, che caricherà direttamente il nuovo URL senza mostrare il loader.

La soluzione cross-browser è la seguente:

$( ".with-preloader" ).click(function() {
    var $a = $( this );
    $( "#loader" ).fadeIn(250, function() {
        window.location = $a.attr( "href" );
    });
    return false;
});

In pratica Safari considera già il nuovo URL come attivo e, caricandolo, ignora l'azione precedente, ossia quella che mostra il loader. Questa soluzione costringe Safari a non ignorare l'animazione jQuery subordinando il caricamento del nuovo URL al completamento dell'animazione.