AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Manga Chainsaw Man : où acheter le Tome 17 édition Collector de ...
19.99 €
Voir le deal

    Précharger des images de design

    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    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



    Précharger des images de design 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 24 Avr 2009 - 0:19

    Merci Riku Wink



    sign
    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    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



    Précharger des images de design 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Light'z
    Light'z
    MasculinAge : 32Messages : 7222

    Lun 27 Avr 2009 - 16:14

    Eh eh intéressant merci beaucoup Riku!
    Bises



    Précharger des images de design 351595pingouinsign
    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Sam 16 Déc 2017 - 19:40

    Bonjour Riku,
    merci pour ce partage.

    Ce script pourrait être utilisé pour accélérer le chargement des images de l'index voir de l'ensemble du forum.

    edit: apparement oui.
    j'ai listé toutes les images contenues dans le forum et cela a largement amélioré le temps de chargement.
    Anonymous
    Invité

    Dim 17 Déc 2017 - 0:00

    Merci pour le partage ! :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:58