Vous êtes ici: Support du web > Scripts et tutoriaux > Javascript > Précharger des images en javascript et detecter la fin du prechargement

Précharger des images en javascript et detecter la fin du prechargement
ybouane Précharger des images en javascript et detecter la fin du prechargement Note : 4/5 (0 vote) Derniéres modifications : 03/04/2009 à 22:59:02 Mots-Clés : precharger charger images img jpeg gif png load onload img.src javascript telecharger attente de chargement detecter la fin de téléchargement d'une image loader Bonjour, dans ce script, je vais vous montrer comment précharger des images en javascript. Pour précharger des image en javascript, il suffit simple de simuler l'affichage des images en question. voici un exemple: Code: JavaScript var img = new Image(); img.src="monimage.gif"; l'image est donc préchargée en javascript. il est aussi possible d'y ajouter l'evenement onload. voici le code: precharger_image.html Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Precharger une image en javascript</title> <script type="text/javascript" src="precharger_image.js"></script> </head> <body> <span class="message" id="message">Les images sont en cours de préchargement...</span> <script type="text/javascript"> //<!-- var image1 = precharger_image('image1.jpg'); image1.onload = function() { document.getElementById('message').style.display='none'; document.getElementById('contenu').style.display='block'; }; //--> </script> <div class="contenu" id="contenu"> <script type="text/javascript"> //<!-- document.getElementById('contenu').style.display='none'; //--> </script> Voici l'image qui viens d'être préchargée.<br /> <img src="image1.jpg" alt="Image 01" /> </div> </body> </html> precharger_image.js Code: JavaScript function precharger_image(url) { var img = new Image(); img.src=url; return img; } Essayer c'est tout, merci et j'espère que ce script vous sera utile. Scripts et tutoriaux similaires à celui ci: Recharger/Actualiser une page en javascript [AS3]Faire un preloader en flash, ActionScript 3 [AS2]Faire un preloader en flash, ActionScript 2 Évaluer la vitesse de connexion en javascript Simple PHP Forum Script - Forum en php facile simple script code telecharger forum php gratuit mysql Compression Gzip en php - accélérer le téléchargement réduire taille pages Modifier le curseur en image ou curseurs proposés en CSS/(X)html Système d'onglets en Javascript, (X)html et CSS dans la même page Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par auratus le 25/08/2009 à 13:33:31 marche pas sous ie6 Envoyé par Sergio le 08/10/2009 à 01:20:56 Bonjour! Moi j`ai un problème de transfert d`une bannière animé dans un site en javascript où en html que je transfert dans un site web toute faite et une fois la bannière installer elle ne s`anime,où scintille pas . Pourquoi? Envoyé par tedheu le 17/12/2010 à 16:34:22 Merci pour ce script, ça m'a été utile. Par contre en essayant des variantes, je me suis aperçu que "onload" devait être écrit en minuscule sinon la fonction était exécutée avant la fin du téléchargement de l'image (avec onLoad) ?! et de plus il est nécessaire d'appeler une fonction anonyme, sinon "onload" en minuscule appliqué à un objet image n'est pas géré ?! Bref, bizarre ! (ça marche sous IE6, firefox 2, et safari 4, os > XP sp2) Bonne journée, T² Envoyé par jTHKqJNJoJimepIB le 04/06/2011 à 04:37:20 Such a deep aneswr! GD&RVVF Envoyé par dvafgajl le 24/01/2012 à 12:30:03 20

Précharger des images en javascript et detecter la fin du prechargement

ybouane

Précharger des images en javascript et detecter la fin du prechargement
Note : 4/5 (0 vote)
Derniéres modifications : 03/04/2009 à 22:59:02
Mots-Clés : precharger charger images img jpeg gif png load onload img.src javascript telecharger attente de chargement detecter la fin de téléchargement d'une image loader

Bonjour,
dans ce script, je vais vous montrer comment précharger des images en javascript.
Pour précharger des image en javascript, il suffit simple de simuler l'affichage des images en question.
voici un exemple:

Code: JavaScript

var img = new Image();

img.src="monimage.gif";

l'image est donc préchargée en javascript. il est aussi possible d'y ajouter l'evenement onload.

voici le code:
precharger_image.html

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Precharger une image en javascript</title>

        <script type="text/javascript" src="precharger_image.js"></script>

    </head>

    <body>

            <span class="message" id="message">Les images sont en cours de pr&eacute;chargement...</span>

                <script type="text/javascript">

                        //<!--

                                var image1 = precharger_image('image1.jpg');

                                image1.onload = function()

                                {

                                        document.getElementById('message').style.display='none';

                                        document.getElementById('contenu').style.display='block';

                                };

                        //-->

                        </script>

        <div class="contenu" id="contenu">

                <script type="text/javascript">

                        //<!--

                                document.getElementById('contenu').style.display='none';

                        //-->

                        </script>

                Voici l'image qui viens d'&ecirc;tre pr&eacute;charg&eacute;e.<br />

                <img src="image1.jpg" alt="Image 01" />

        </div>

    </body>

</html>

precharger_image.js

Code: JavaScript

function precharger_image(url)

{

        var img = new Image();

    img.src=url;

        return img;

}

Essayer

c'est tout,
merci et j'espère que ce script vous sera utile.

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par auratus le 25/08/2009 à 13:33:31

marche pas sous ie6

Envoyé par Sergio le 08/10/2009 à 01:20:56

Bonjour! Moi j`ai un problème de transfert d`une bannière animé dans un site en javascript où en html que je transfert dans un site web toute faite et une fois la bannière installer elle ne s`anime,où scintille pas . Pourquoi?

Envoyé par tedheu le 17/12/2010 à 16:34:22

Merci pour ce script, ça m'a été utile.
Par contre en essayant des variantes, je me suis aperçu que "onload" devait être écrit en minuscule sinon la fonction était exécutée avant la fin du téléchargement de l'image (avec onLoad) ?! et de plus il est nécessaire d'appeler une fonction anonyme, sinon "onload" en minuscule appliqué à un objet image n'est pas géré ?!
Bref, bizarre ! (ça marche sous IE6, firefox 2, et safari 4, os > XP sp2)

Bonne journée,
T²

Envoyé par jTHKqJNJoJimepIB le 04/06/2011 à 04:37:20

Such a deep aneswr! GD&RVVF

Envoyé par dvafgajl le 24/01/2012 à 12:30:03