Discussion :

[WanFoxOne]

Bonjour,

Depuis maintenant quelques jours j'ai débuté, en guise d'entraînement (études), l'intégration d'un site WEB, et je fait face à un problème au niveau d'un script fait main : le but de celui-ci est de gérer le chargement des images de façon asynchrone avec un GIF d'attente.

Voici comment le tout se compose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
/** 
* Un exemple de cible du script
**/
 
<div class="uk-background-cover uk-background-cover-loader" image_url='https://www.nasa.gov/sites/default/files/thumbnails/image/viirs_9apr2015.jpg'></div>
 
/** 
* Le script (aucune abstraction pour le moment, j'ai fait au plus simple)
**/
 
<script>
$(document).ready(function () {
 
        /** Récupération des éléments que l'on souhaite charger de manière asynchrone avec un GIF de chargement */
        $('.uk-background-cover-loader').each(function () {
 
            var target = $(this);
 
            /** Création d'une image fantôme */
            image_temp = new Image();
            image_temp.src = target.attr("image_url");
 
            /** Lorsque cette image est prête, on la transfère dans la cible */
            image_temp.onload = function () {
 
                /** On cache la cible avec un fade (le GIF est intégré via le sélecteur ::after de la cible via la classe "uk-background-cover-loader" */
                target.fadeTo(300, 0, function () {
 
                    /** Lorsque la cible est caché, on retire la classe du GIF et on ajoute en style l'image, puis nettoyage des éléments inutiles */
                    target.css("backgroundImage", "url(" + image_temp.src + ")");
                    target.removeAttr("image_url");
                    target.removeClass("uk-background-cover-loader");
 
                    /** Réapparition de la cible avec l'image chargée */
                    target.fadeTo(300, 1);
 
                });
            }
        });
    });
</script>

Le problème quel est-il ? Et bien, pour faire mes tests, j'ai mis en place deux cibles avec un lien (qui pointe vers un serveur d'image distant) différent en attribut (une légère et une volumineuse) : hors, lors de l'apparition des cibles, surprise, les deux ont la même images ...!
Comme si les variables étaient perdues...

Je vous remercie d'avance pour vos pistes et votre aide !

WFO

[WanFoxOne]

Une simple erreur de ma part : j'ai en effet omis d'initialiser la variable "image_temp" avec un "var".