French subtitles

← cs255_unit1_04_p_Loading-Images

Get Embed Code
8 Languages

Showing Revision 1 created 04/21/2013 by Maude MARQUANT.

  1. L'essentiel de l'interaction du Canvas que GRITS utilise, est via le rendu d'images vers le canvas.
  2. Afin de dessiner une image sur la toile (le canvas), nous devons d'abord la charger.
  3. Pour charger une image, nous devons créer un nouvel objet de l'image, qui,
  4. dans JavaScript, est fait en trois étapes. Numéro 1 : nous avons besoin de déclarer
  5. l'objet de l'image. Numéro 2 : nous devons définir sa fonction de chargement ("onload").
  6. Puis numéro 3 : nous devons définir l'attribut "image.src". Il est à noter que dès que la
  7. propriété "source", si cette image est définie par une valeur Javascript, elle lancera la fonction "onload".
  8. Pour cette raison, nous devons spécifier la fonction de rappel d'abord
  9. avant de définir l'attribut de la source. Sinon l'image va charger les données et
  10. nous n'obtiendrons pas un rappel reçu.
  11. Maintenant nous allons jeter un oeil à ce code. Voici l'url de l'image que nous aimerions que
  12. vous chargiez. Ce que nous voulons vous faire faire c'est, créer un objet image, suivit des
  13. étapes que nous avons juste mentionné et définir la fonction "onload" et la source
  14. pour cette image décrite dans le code. Assurez-vous que votre fonction "onload" est
  15. assignés à ce "onImageLoad" ici, qui va en fait imprimer quelques beaux
  16. petits messages dans le journal de console, vous faisant savoir que les choses ont chargé correctement.
  17. Si vous êtes confus au sujet de si oui ou non votre image se charge,
  18. n'oublier pas de vérifier les outils de développement de Chrome dans l'onglet réseau,
  19. qui répertoriera si l'image a été chargée, et combien de temps il a fallu pour le faire.