javascript: onload et onerror appelé ensemble

Je suis nouveau sur le JavaScript et donc dans la confusion de l'étendue de la variable...
Je suis en train de charger une image, et de la remplacer par une autre URL, lorsqu'il n'existe pas.
- Je le faire en JavaScript.

Ici j'ai eu 2 versions extrêmement identiques, mais ils fonctionnent différemment. La seule chose en commun: ils ne travaillent pas. La 3ème version nécessite une actualisation et ne fonctionne pas sous IE. d est l'objet avec le numéro de l'attribut, qui n'a pas de problème.

Voici ce qu'ils ont en commun

.attr("xlink:href", function (d) {
  var img = new Image();

Ici la Version 1: les Deux onload et onerror sont appelés. Cependant d reçoit la src, malheureusement c'est toujours le generic.jpg.

  function onLoadHandler() {
     d.src = "http://.../peopleimages/" + d.num + ".jpg";
     alert(d.name + " onload called");
  }
  function onErrorHandler() {
     d.src = "http://.../images/generic.jpg";
     alert(d.name + " onerror called");
  }
  img.onload = onLoadHandler();
  img.onerror = onErrorHandler();
  img.src = "http://.../peopleimages/" + d.num + ".jpg";
  return d.src;
  }

Ici la Version 2: en Fonction de l'existence de l'image, soit onload ou onerror est appelé. Mais la valeur de d.src est pas défini lorsque l'alerte.

  img.onload = function () {
     alert(d.name + " : loaded");
     d.src = "http://.../peopleimages/" + d.num + ".jpg";
  }
  img.onerror = function () {
     alert(d.name + " : failed");
     d.src = "http://.../images/generic.jpg";
  }

  img.src = "http://.../peopleimages/" + d.num + ".jpg";
  alert(d.src);//undefined
  return d.src;
  }

Ici la Version 3: il fonctionne mais pas la première fois. Je ne actualiser pour afficher correctement les images. Peut-être qu'il retourne avant que l'image est complètement chargé. 

  img.src = "http://.../peopleimages/" + d.num + ".jpg";
  return img.complete ? "http://.../peopleimages/" + d.num + ".jpg" : "http://.../images/generic.jpg";
  }

OriginalL'auteur wceo | 2012-09-20

  1. 13

    Vous appelez les fonctions, de ne pas assigner des!

    img.onload = onLoadHandler();
img.onerror = onErrorHandler();

    doit être

    img.onload = onLoadHandler;
img.onerror = onErrorHandler;
    Merci beaucoup! J'ai été négligent. Maintenant, il y a le problème de la d évolution.src à l'intérieur de la fonction..
    Pourquoi ne pas simplement utiliser this à l'intérieur?
    Désolé, mais je ne suis pas tout à fait sûr. Il se doit cette[d.src]? Il ne fonctionne pas.
    non, this.src = "foo.gif";
    J'ai aussi essayé celui-ci par l'ajout de var src à l'extérieur de l'gestionnaires, mais ça ne fonctionne pas 🙁

    OriginalL'auteur epascarello

  2. 1

    Le problème avec votre deuxième exemple est celui de l'image rappels sont déclenchés lorsque l'image se charge, après que votre code a été évaluée. Je ne suis vraiment pas sûr de ce que votre code accomplit, mais essayer quelque chose comme cela.

      img.onload = function () {
     alert(d.name + " : loaded");
     d.src = "http://.../peopleimages/" + d.num + ".jpg";
     return doSomething(this, d);
  }
  img.onerror = function () {
     alert(d.name + " : failed");
     d.src = "http://.../images/generic.jpg";
     return doSomething(this, d);
  }

  function doSomething(img, d) {
     img.src = "http://.../peopleimages/" + d.num + ".jpg";
     alert(d.src);
     return d.src;
  };

    OriginalL'auteur Chris McCowan