Salut, dans mon projet je charge une image. J'y ajoute une class ( avec un z-indez pour pouvoir être affiché par dessus un élément. )

Problème l'image charge correctement, mais parfois ( quand le cache est vidé notamment ) s'affiche en dessous de mon élément ( Ne prend pas en compte l'index ). Ma question est donc comment faire pour exécute une fonction une fois la class de mon image correctement chargé.

Le code en question --> 

var perso = new Image();
perso.class= 'perso';
perso.src = 'images/unitOther/spriteUnits.png';
//Affichage du personnage
perso.onload = function() {
  app.playerUnits(perso);
};

-
Edité par BaboomBcmp 11 janvier 2018 à 14:59:52

salut,

Tu as l'événement window.onload qui permet d'attendre que le document soit chargé avant d’exécuter une fonction. ça devrait régler ton soucis

var app = {
  init: function(){
    //Mon code
  }
};

$(app.init);

Tu utilises jQuery ?

Si oui, au lieu de window.onload, tu as

$(document).ready(function() {
//ton code
});

Ton script n'attends pas le chargement de la page avant de s'exécuter, il faut pour ça attendre un événement spécifique.

-
Edité par Tybahult 11 janvier 2018 à 15:47:42

Yes, j'ai commencé à m'y intéresser y'a pas trop longtemps donc je suis loin de tout connaitre mais je l'utilise. 

J'ai testé ta méthode mais ça n'a pas arrangé le problème =S. Ca doit être un cas assez spécifique qui m’empêche d'affiché mon image correctement. 

Bonjour,

Essayes :

perso.className = 'perso';

Malheureusement ça ne règle pas le problème... Merci pour ta proposition en tout cas. 

J'ai trouvé une solution du pauvre provisoire... J'ai mis un setTimeout sur ma fonction afin d'être sur que la class est bien le temps de chargé... Ça fonctionne nickel, mais je suis sur que y'a mieux. donc si jamais quelqu'un à la solution miracle je suis preneur ! 

perso.onload = setTimeout(function () {
      app.playerUnits(idGeneral, perso, context);
    },1000);

En effet perso.className est correct et non .class qui n'est psa une propriété existante.
Tu peux même faire mieux avec

perso.classList.add('perso');

C'est étrange que le Timeout résolve le soucis et non le $(document).ready()..
Tu as essayé de cette manière?

$(document).ready(function() {
    perso.onload();
});

Edit : tout en enlevant le setTimeout dans perso.onload().

-
Edité par Tybahult 12 janvier 2018 à 10:04:24