AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Précharger des images de design

    Partagez
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Jeu 23 Avr 2009 - 21:47

    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
    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 Razz
    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 Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 24 Avr 2009 - 0:19

    Merci Riku Wink



    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Lun 27 Avr 2009 - 14:55

    Je t'en prie mon chou Wink
    Je ne pense pas que ça serve à beaucoup de monde, mais une personne me suffira XD
    Bises




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Light'z
    MasculinAge : 25Messages : 7222

    le Lun 27 Avr 2009 - 16:14

    Eh eh intéressant merci beaucoup Riku!
    Bises



    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Juil 2017 - 6:53