Précharger des images avant animate

bagui
Javascript

Bonjour,

J'aimerais mettre en place un préchargement de mes images avant de lancer les function animate.
Comment faire ? Merci

<div id="home">

    <div class="accroche"><img src="imagesFront/agisauto-repare.jpg" alt="Agis Auto Garage Solidaire répare et entretien votre véhicule quelqu'en soit la marque"/></div>

    <!-- Slider cars -->
    <a href="#" title="Atelier de mécanique toutes marques"><img class="car1" src="imagesFront/atelier-mecanique.png" alt="Atelier de mécanique toutes marques"/></a>
    <a href="#" title="Location de véhicules : Pro-voiturages"><img class="car2" src="imagesFront/location-vehicules.png" alt="Location de véhicules : Pro-voiturages"/></a>
    <a href="#" title="Dons et ventes de véhicules"><img class="car3" src="imagesFront/vente-vehicules.png" alt="Dons et ventes de véhicules"/></a>
    <a href="#" title="MOB Agis : location de cyclomoteur à la journée ou à la semaine"><img class="car4" src="imagesFront/mobo-agis.png" alt="MOB Agis : location de cyclomoteur à la journée ou à la semaine"/></a>

    <script type="text/javascript">
        $(function(){
            $('#home').append('<div id="loading"></div>');
            $("img.car1").animate({
                "left": "-10"
                },1000);
            $("img.car2").animate({
                "left": "350"
            },2000);
            $("img.car3").animate({
                "left": "570"
            },3000);
            $("img.car4").animate({
                "left": "355"
            },4000);
        });
    </script>

</div>

4 réponses

Grafikart

et si tu met un loader en bg de tes balise img ?

bagui
Auteur

Bonjour,
J'ai trouvé ce script pour préloader une image de fond, mais dans mon cas j'ai 4 images. Comment faire merci ?
http://stackoverflow.com/questions/5206145/single-image-jquery-preloader

thqloz

Bonjour totof,

concernant ton problème, tu dois créer un objet image pour chaque image à précharger.

Car l'objet image contient des méthodes (onload) qui permet d’exécuter une fonction lors du chargement de l'image, et dans ton cas ça serait d'injecter l'attribut "src" de l'objet à la balise qui doit recevoir cette image.

Je sais pas si c'est très clair, mais par exemple :

Html:

<img class="preload" src "blabla1.png">
<img class="preload" src "blabla2.png">
<img class="preload" src "blabla3.png">
<img class="preload" src "blabla4.png">

Js: 

$(".preload").each(function(){
//On cache l'image par défaut 
this.hide();
//On récupère l'item courant
var current = $(this);
//On crée un objet image
var loadIt = new Image();
//Au chargement on lui dit de disparaitre et de faire un fadeIn sur l'élément qui recevra l'image fraichement chargée;
$(loadIt).load(function(){
    $(this).hide();
    current.fadeIn();
}).attr('src',current.attr('src'));
});

(J'ai pas testé le code mais grosso modo il te donne une idée de la façon de faire).

bagui
Auteur

Bonjour,
merci beaucoup pour votre aide. C'est un très bon départ