Fondu entre deux pages HTML

Résolu
RomainTR -  
 RomainTR -
Bonjour,

Je développe actuellement un site web "www.garbage-embrace.com".

Ce site est créée à partir de Photoshop car il consiste uniquement en un positionement d'image dans la page. (Oui je sais cela fait mal à entendre et j'imagine qu'avec légèrement d'expertise l'on peut tout faire en CSS ... la prochaine fois ...)

Voici ce qui m'amène à vous, je souhaite à chaque chargement de page faire un fondu pour adoucir les transitions.

Voici le script que j'ai trouvé :

<SCRIPT>

window.onload = function() {MakeFluffHappen()}
function MakeFluffHappen() {
FluffyKittenMaker(0);
Conflaburator(0);
}
function FluffyKittenMaker(SomeNumberThing) {
document.body.style.opacity = SomeNumberThing/100;
}
function Conflaburator(SomeNumberThing) {
if (SomeNumberThing <= 100) {
FluffyKittenMaker(SomeNumberThing);
SomeNumberThing += 2;
window.setTimeout("Conflaburator("+SomeNumberThing+")", 100);
}
}

</SCRIPT>

Ce script fonctionne pour Firefox, seulement il y a un hic ! Le navigateur lors du premier chargement de la page charge les éléments puis ensuite exécute le script. Ce qui a pour effet d'afficher très brièvement tout les éléments de la page puis ensuite la totalité de la page qui s'affiche en fondu progressif. Ce désagrément ne se reproduit plus lorsque l'on retourne ultérieurement sur la dite page et cela car celle-ci est déjà chargée dans le cache de notre navigateur.

Question 1 ? Comment éviter cette étape de préchargement et comment lancer le script tout de suite pour éviter cet effet clin d'oeil?

Question 2 ? Ce script fonctionne t-il sur Safari ? et IE ?

Je vous remercie

Bonne soirée.

romain.

1 réponse

  1. Flachy Joe Messages postés 2303 Statut Membre 261
     
    Salut, perso je trouve ta transition un peu lente, modifie donc la ligne
    SomeNumberThing += 2; 
    en
    SomeNumberThing += 10; 

    Pour le problème de clignotement, il faut ajouter opacity=0 dans le style de la balise body :
    <BODY LANG="de-DE" BGCOLOR="#cccccc" DIR="LTR" STYLE="opacity:0">

    Pourquoi lang=de d'ailleurs ?
    1
    1. RomainTR
       
      Bonsoir,

      merci pour la réponse, cela marche parfaitement .

      lang=de

      car j'utilise un ordinateur allemand et je me trouve en Allemagne ;)
      0
    2. Flachy Joe Messages postés 2303 Statut Membre 261
       
      mais la page est en anglais donc il faut mettre lang=en pour que les moteurs de recherche la classifie correctement...
      0
    3. RomainTR
       
      ;) merci. correction effectuée à ce jour !
      0