Je souhaite masquer le chargeur lorsque toutes les images sont chargées sur la toile. Actuellement, ce qui se passe n'attend pas les images chargées sur la toile. L'aide est appréciée.

loader.show();
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
   loader.hide();
});
1
Ashish Soni 16 sept. 2020 à 09:28

3 réponses

Meilleure réponse

La méthode prend en charge un rappel, que vous utilisez avec canvas.renderAll.bind(canvas) Au lieu d'appeler cette fonction, appelez votre propre fonction pour rendre et masquer le chargeur.

loader.show();
canvas.loadFromJSON(json, function() {
   canvas.renderAll();
   loader.hide();
});

La troisième fonction est utilisée uniquement pour traiter chaque objet après l'initialisation et est appelée une fois par objet.

1
AndreaBogazzi 16 sept. 2020 à 07:01

Vous devez utiliser Promise.all (), quelque chose comme:

function loadImg(json){
   return new Promise((resolve,reject)=>{
      canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
         resolve();
      })
   });
}

Alors:

loader.show();
Promise.all(jsonArr.map(loadImg)).then(loader.hide);

Je ne suis pas en mesure de vous donner une réponse définitive en raison d'une certaine ambiguïté, mais cela devrait aller dans ce sens.

0
Chong Lip Phang 16 sept. 2020 à 06:40

Depuis docs, vous pouvez lire que la troisième fonction est appelée

après chaque objet de tissu créé.

Ainsi, il masquera le chargeur lorsque la première image sera chargée.

Vous pouvez utiliser le compteur dans le corps de function(o, object) et vérifier si le compteur a atteint le nombre d'images attendues à afficher, puis masquer le chargeur.

0
Daniel 16 sept. 2020 à 06:42