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

Le 03/04/2009 à 22:59:02
Note: 4/5
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:

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

<!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

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 Tutoriels similaires

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