Timer pour chargement d'image
Yimimura
-
slach24 -
slach24 -
Bien le bonjour,
Voila je suis en ce moment en train de créer le site d'une association pour un stage,
et l'une des pages que je créer contient des images en grand nombre
(en gros ce sont les miniatures de photos d'événementiels soutenus par ladite assoc) qui lorsque l'on click dessus font l'effet d'affichage importé via lightbox,
a ce niveau la aucun soucis.
Non la vraie question c'est celle ci: est il possible en php,
ou n'importe quelle autre methode exceptée flash
(oui pas trop envie de me casser la tête a faire un diaporama flash) de faire que lorsque l'on click sur le lien de la page contenant les photos,
afin d'éviter que quelqu'un click direct sur la premiére image (empéchant le lancement de l'effet lightbox),
de faire en sorte qu'un "timer" apparaisse, empéchant toutes action en attendant que la totalité de la page soit chargée avec si possible un petit icone en gif (comme ce lui de lightbox justement) pour faire comprendre que la page charge et qu'il faut patienter.
Merci d'avance :)
Voila je suis en ce moment en train de créer le site d'une association pour un stage,
et l'une des pages que je créer contient des images en grand nombre
(en gros ce sont les miniatures de photos d'événementiels soutenus par ladite assoc) qui lorsque l'on click dessus font l'effet d'affichage importé via lightbox,
a ce niveau la aucun soucis.
Non la vraie question c'est celle ci: est il possible en php,
ou n'importe quelle autre methode exceptée flash
(oui pas trop envie de me casser la tête a faire un diaporama flash) de faire que lorsque l'on click sur le lien de la page contenant les photos,
afin d'éviter que quelqu'un click direct sur la premiére image (empéchant le lancement de l'effet lightbox),
de faire en sorte qu'un "timer" apparaisse, empéchant toutes action en attendant que la totalité de la page soit chargée avec si possible un petit icone en gif (comme ce lui de lightbox justement) pour faire comprendre que la page charge et qu'il faut patienter.
Merci d'avance :)
A voir également:
- Timer pour chargement d'image
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Recherche image - Guide
3 réponses
Oui c'est possible et c'est en javascript
Le but de la manoeuvre etant d'afficher une div (qui contient une animation ou pas, comme tu veu) en position absolue sur toute la page tant que toute les images ne sont pas chargée
Le but de la manoeuvre etant d'afficher une div (qui contient une animation ou pas, comme tu veu) en position absolue sur toute la page tant que toute les images ne sont pas chargée
serait il possible d'avoir un exemple dans ce cas? ou le script? que je comprenne un peu mieux la manœuvre s'il te plait?
tien je t'envoi sur un site que j'ai réalise et qui utilise ce principe
www.achtungdass.com
quand tu clic sur "enter" tu verra une page de loading, c'est une DIV qui prend tout l'ecran et qui ne s'efface que lorsque tout les images ont été chargée
Regarde la source pour le code, rien n'est caché ;)
le script est celui ci
function preload(){
document.getElementById("preloadCache").style.visibility = "visible"; //J'affiche la DIV
var pageHTML = document.getElementsByTagName("img") // Je recupere toute les images
var totalImage = pageHTML.length // Je compte combien y en a
if (i < totalImage){ //Si i est inferieur au nombre d'image
if (pageHTML.item(i).complete) { // Je regarde si l'image a l'index i est fini de télécharger
i++ // J'incremente i pour passer a limage suivante
setTimeout(preload) // je relance cette fonction pour continuer (sorte de boucle)
}
} else {
document.getElementById("loader").style.visibility = "hidden"; //Je cache ma DIV
document.getElementById("preloadCache").style.visibility = "hidden"; //Je cache ma DIV
document.getElementById("menu").style.visibility = "visible";
document.getElementById("playerlink").style.visibility = "visible";
document.body.scroll="yes";
}
}
www.achtungdass.com
quand tu clic sur "enter" tu verra une page de loading, c'est une DIV qui prend tout l'ecran et qui ne s'efface que lorsque tout les images ont été chargée
Regarde la source pour le code, rien n'est caché ;)
le script est celui ci
function preload(){
document.getElementById("preloadCache").style.visibility = "visible"; //J'affiche la DIV
var pageHTML = document.getElementsByTagName("img") // Je recupere toute les images
var totalImage = pageHTML.length // Je compte combien y en a
if (i < totalImage){ //Si i est inferieur au nombre d'image
if (pageHTML.item(i).complete) { // Je regarde si l'image a l'index i est fini de télécharger
i++ // J'incremente i pour passer a limage suivante
setTimeout(preload) // je relance cette fonction pour continuer (sorte de boucle)
}
} else {
document.getElementById("loader").style.visibility = "hidden"; //Je cache ma DIV
document.getElementById("preloadCache").style.visibility = "hidden"; //Je cache ma DIV
document.getElementById("menu").style.visibility = "visible";
document.getElementById("playerlink").style.visibility = "visible";
document.body.scroll="yes";
}
}
