Lightbox workaround per pagine non completamente caricate
Vi sarà capitato di usare Lightbox in una delle sue tante varianti o script simili per gestire lo zoom di immagini sui vostri siti.
Semplice, leggero, stilabile, tutto ok.
Purtroppo soffre di un piccolo problema, non lo chiamo bug perché la documentazione ufficiale recita:
It doesn't work if I click an image before the page has finished loading.
This is not a bug, but a side-effect of unobtrusive scripts of this kind.
La funzione initLightbox() forza l'inizializzazione di Lightbox; poi non resta che richiamare la funzione ShowThumb(), che molto semplicemente setta l'attributo src dell'immagine che deve contenere la thumbnail.
Peccato che senza aggiungere il piccolo delay introdotto con setTimeout la cosa non funzionava; ho dato un'occhiata a cosa esegue initLightbox e ad "intuito" ho pensato che bastasse dare tempo all'interprete Javascript di terminare il ciclo sui tag <a> prima che l'altra funzione ne modificasse il contenuto.
Ogni buon programmatore non dovrebbe mai accontentarsi di una spiegazione del genere, malgrado la breve euforia per aver accontentato in qualche modo il cliente :D
Io continuo a pensarci, se qualche guru JS mi illumina gli sarò grato!
Semplice, leggero, stilabile, tutto ok.
Purtroppo soffre di un piccolo problema, non lo chiamo bug perché la documentazione ufficiale recita:
It doesn't work if I click an image before the page has finished loading.
Nella stragrande maggioranza dei casi questo non è un problema, ma a volte può essere fastidioso, soprattutto se la pagina per qualche motivo ha tempi di caricamento elevati.
Il mio caso è questo:
In fondo alla scheda prodotto viene caricata la thumbnail del sito del produttore, generata on the fly da un servizio web.
Se l'immagine non risulta nella cache del sistema deve essere generata (visitando la pagina web relativa) e l'operazione può richiedere qualche secondo.
Ovviamente nel frattempo Lightbox non funziona e se si clicca per eseguire lo zoom della foto del prodotto si ottiene il comportamento standard del browser per un link ad una immagine.
Dovrei usare l'imperfetto perché adesso il funzionamento è quello corretto, ho trovato un workaround, solo che non ho capito fino in fondo PERCHE' funziona :P
In realtà una soluzione "sensata" poteva essere questa: eseguire il caricamento della thumbnail tramite uno script PHP richiamato via Ajax, in questo modo il DOM sarebbe stato disponibile al completo anche prima del caricamento dell'immagine.
Invece ho provato una soluzione Javascript only, sfruttando jQuery.
Questo è il codice finale:
$(document).ready(function() {
initLightbox();
setTimeout("ShowThumb();",500);
});
Il metodo .ready() risolve parte del problema, come spiegato nella doc ufficiale:
While JavaScript provides the
load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.La funzione initLightbox() forza l'inizializzazione di Lightbox; poi non resta che richiamare la funzione ShowThumb(), che molto semplicemente setta l'attributo src dell'immagine che deve contenere la thumbnail.
Peccato che senza aggiungere il piccolo delay introdotto con setTimeout la cosa non funzionava; ho dato un'occhiata a cosa esegue initLightbox e ad "intuito" ho pensato che bastasse dare tempo all'interprete Javascript di terminare il ciclo sui tag <a> prima che l'altra funzione ne modificasse il contenuto.
Ogni buon programmatore non dovrebbe mai accontentarsi di una spiegazione del genere, malgrado la breve euforia per aver accontentato in qualche modo il cliente :D
Io continuo a pensarci, se qualche guru JS mi illumina gli sarò grato!
Commenti
Posta un commento