Bonjour,
Aujourd'hui je souhaite vous présenter un script qui permet de charger des images de design qui vont, notamment, être utilisée lors d'effets de survole comme la navigation actuelle de never utopia :
IMAGE APERÇU À REMPLACER.
La première image, en position normale, est chargée et stockée dans le cache de votre navigateur. Cependant la deuxième ne l'est pas, et elle se chargera uniquement au moment où la souris passe dessus. Ce qui peut entrainer une réaction de survole plutôt lente.
Pour tester ça faites ctrl+F5 sur la page actuelle, et passer rapidement votre souris sur la barre de navigation, vous ne devriez pas avoir de réaction immédiate.
La fonction est une fonction javascript qui va prendre une par une les images que vous listerez vous-même, et va les placer dans le cache de votre navigateur (forme de preload au final)
Voici le code à placer entre les balises HEAD
Sur la balise BODY d'ouverture :
Le script est à l'heure actuelle trop complexe pour moi pour que je puisse vous en expliquer les moindres détails avec précision, je préfère donc ne rien expliquer plutôt que de dire des idioties.
Je vais quand même préciser ce dont je suis sûr :
Partie HEAD
- Ligne 1 : annonce du script et des langages utilisés
- Ligne 2 : annotation du script pour améliorer la compatibilité inter-navigateur
- Ligne 3 : annonce de la fonction ( function ), de son nom ( prechargimg() ) et ouverture des insctructions ( { )
- Ligne 4 : déclaration d'une variable ( var ), son nom ( doc ) et sa valeur ( document ). Ainsi à chaque apparition du terme "doc" cela signifiera qu'on voulait écrire document, l'idée c'est de gagner quelques caractères et un peu de temps XD
- Ligne 5 : première condition, si elle est vérifiée alors on interprète les instructions des lignes qui suivent. Ici il faut qu'il y ai des images à charger sur le document (cf. liste future)
- Ligne 6 à 9 : création de tableaus sous condition qui vont être conçus à partir de la liste que vous fournirez, la tableau sert donc directement dans la fonction et la lecture des instructions de pré-chargement.
- Ligne 10, à 12 : fermeture des différentes condition, et de la fonction.
- Ligne 13 : fermeture de l'annotation
- Ligne 10, à 12 : fermeture de la fonction
Partie BODY
La balise body représente le début du contenu visible HTML.
L'attribut onload signifie "au chargement", donc ici au chargement de body, donc de la page
Donc, au chargement, on lance la fonction qu'on vient de faire, et entre les parenthèses on inscrit les différentes adresses des images à pré-chargées, entre simple-quote, donc des apostrophes, séparées par des virgules :
'image1.png', 'image2.png' etc...
Je signale encore une fois, que toutes les images listées sont chargées via javascript, si le visiteur a désactivé javascript, les images ne se chargeront pas du tout (après quelques tests).
Il est donc important d'utiliser ce système uniquement si vous avez déjà utilisé javascript pour l'effet de survole, ou si votre site oblige l'utilisation de javascript à l'utilisateur.
Merci de m'avoir lu, enjoy
Aujourd'hui je souhaite vous présenter un script qui permet de charger des images de design qui vont, notamment, être utilisée lors d'effets de survole comme la navigation actuelle de never utopia :
IMAGE APERÇU À REMPLACER.
La première image, en position normale, est chargée et stockée dans le cache de votre navigateur. Cependant la deuxième ne l'est pas, et elle se chargera uniquement au moment où la souris passe dessus. Ce qui peut entrainer une réaction de survole plutôt lente.
Pour tester ça faites ctrl+F5 sur la page actuelle, et passer rapidement votre souris sur la barre de navigation, vous ne devriez pas avoir de réaction immédiate.
La fonction est une fonction javascript qui va prendre une par une les images que vous listerez vous-même, et va les placer dans le cache de votre navigateur (forme de preload au final)
Voici le code à placer entre les balises HEAD
- Code:
<script language="javascript" type="text/javascript">
<!--
function prechargimg() {
var doc=document;
if(doc.images){
if(!doc.precharg) doc.precharg=new Array();
var i,j=doc.precharg.length,x=prechargimg.arguments; for(i=0; i<x.length; i++)
if (x[i].indexOf("#")!=0){
doc.precharg[j]=new Image; doc.precharg[j++].src=x[i];
}
}
}
-->
</script>
Sur la balise BODY d'ouverture :
- Code:
<body onload="prechargimg('image1.png', 'image2.png', 'image3.png')">
Le script est à l'heure actuelle trop complexe pour moi pour que je puisse vous en expliquer les moindres détails avec précision, je préfère donc ne rien expliquer plutôt que de dire des idioties.
Je vais quand même préciser ce dont je suis sûr :
Partie HEAD
- Ligne 1 : annonce du script et des langages utilisés
- Ligne 2 : annotation du script pour améliorer la compatibilité inter-navigateur
- Ligne 3 : annonce de la fonction ( function ), de son nom ( prechargimg() ) et ouverture des insctructions ( { )
- Ligne 4 : déclaration d'une variable ( var ), son nom ( doc ) et sa valeur ( document ). Ainsi à chaque apparition du terme "doc" cela signifiera qu'on voulait écrire document, l'idée c'est de gagner quelques caractères et un peu de temps XD
- Ligne 5 : première condition, si elle est vérifiée alors on interprète les instructions des lignes qui suivent. Ici il faut qu'il y ai des images à charger sur le document (cf. liste future)
- Ligne 6 à 9 : création de tableaus sous condition qui vont être conçus à partir de la liste que vous fournirez, la tableau sert donc directement dans la fonction et la lecture des instructions de pré-chargement.
- Ligne 10, à 12 : fermeture des différentes condition, et de la fonction.
- Ligne 13 : fermeture de l'annotation
- Ligne 10, à 12 : fermeture de la fonction
Partie BODY
La balise body représente le début du contenu visible HTML.
L'attribut onload signifie "au chargement", donc ici au chargement de body, donc de la page
Donc, au chargement, on lance la fonction qu'on vient de faire, et entre les parenthèses on inscrit les différentes adresses des images à pré-chargées, entre simple-quote, donc des apostrophes, séparées par des virgules :
'image1.png', 'image2.png' etc...
Je signale encore une fois, que toutes les images listées sont chargées via javascript, si le visiteur a désactivé javascript, les images ne se chargeront pas du tout (après quelques tests).
Il est donc important d'utiliser ce système uniquement si vous avez déjà utilisé javascript pour l'effet de survole, ou si votre site oblige l'utilisation de javascript à l'utilisateur.
Merci de m'avoir lu, enjoy
