Javascript Girl
  1. Javascript Girl
  3. Vérifiez si les images sont chargées avant gameloop
Intereting Posts
Obtenir la somme en utilisant footerdata sur jqgrid Redux ne met pas à jour les composants lorsque les propriétés de l'état Immutable profond sont mises à jour Ouvrir par programme un menu déroulant Chemin de file et fichiers HTML5 Lire plus de liens avec JavaScript pur Comment bloquer les fonctions asynchrones en JavaScript Vérifiez si mon javascript est chargé sur un site Puis-je changer le contexte de javascript "this"? Chrome "Scripts peut fermer uniquement les fenêtres qui ont été ouvertes par elle" erreur La lecture automatique vidéo ne fonctionne pas dans Safari et le navigateur de bureau Chrome JQuery.on ('clic') avant jQuery.click? Google Maps API v3: Comment supprimer un auditeur d'événement? JQuery ne publie pas toutes les entrées d'un formulaire après le .append () Ecriture du texte UTF8 au fichier Empêcher de rafraîchir / recharger une page avec JavaScript

Vérifiez si les images sont chargées avant gameloop

Jusqu'à présent, mon programme fonctionne comme je le souhaite. Cela fonctionne bien: 

// Player object var player = { x: 10, y: 10, draw: function () { ctx.drawImage(playerImg, 0, 0); ...

  1. Devrais-je vérifier si playerImg est chargé en premier, même s'il fonctionne correctement jusqu'à présent?

  2. Aussi, quelle est la meilleure façon de vérifier. Je pensais mettre toutes les images dans un tableau. Ensuite, vérifiez avec la fonction onLoad . S'ils sont tous chargés, je vais commencer la boucle du jeu. Est-ce une bonne idée?

Merci

Comment fonctionne le chargement de l'image

Vous devez vérifier si l'image est chargée car le chargement d'image est asynchrone. Vous pouvez constater que votre code fonctionne parfois sans. Cela drawImage principalement par le fait que votre image existe dans le cache et que le navigateur est capable de le charger assez rapidement avant que le drawImage soit appelé ou que l'image existe sur un disque local.

Cependant, les nouveaux utilisateurs devront télécharger les données en premier et vous ne souhaitez pas que les utilisateurs de première fois subissent des erreurs telles que les images qui ne s'affichent pas car elles ne sont pas terminées.

Comme cela fonctionne de manière asynchrone, votre code continuera à s'exécuter alors que le chargement de l'image se déroule en arrière-plan. Cela peut entraîner l'exécution de votre code avant que l'image ne soit terminée. La gestion du chargement d'image est donc importante

Gestion de plusieurs images

Vous pouvez d'abord charger toutes vos images (ou celles dont vous avez besoin pour commencer) et vous pouvez les définir en utilisant le tableau: 

 var imageURLs = [url1, url2, url3, ...], images = [], count = imageURLs.length;

Ensuite, iterate et crée les éléments d'image: 

 for(var i = 0; i < count; i++) { /// create a new image element var img = new Image(); /// element is valid so we can push that to stack images.push(img); /// set handler and url img.onload = onloadHandler; img.src = imageURLs[i]; /// if image is cached IE (surprise!) may not trigger onload if (img.complete) onloadHandler().bind(img); }

Et dans la fonction de rappel, vérifiez le nombre d'inventaire: 

 function onloadHandler() { /// optionally: "this" contains current image just loaded count--; if (count === 0) callbackDone(); }

Votre rappel est le code que vous souhaitez exécuter ensuite. Vos images seront dans les images tableau dans le même ordre que les imageURLs .

Pour la production, vous devez également incorporer un gestionnaire de la onerror en cas de problème.