Javascript: onload et onerror sont appelés ensemble

Je suis nouveau sur JavaScript et donc confus pour la portée variable … J'essaie de charger une image et de la remplacer par une autre URL quand elle n'existe pas. Je dois le faire dans JavaScript pur.

Ici, j'ai eu 2 versions extrêmement semblables, mais elles fonctionnent différemment. La seule chose en commun est: ils ne fonctionnent pas. La 3ème version nécessite un rafraîchissement et ne fonctionne pas sous IE. D est l'objet avec l'attribut number, qui n'a aucun problème.

Voici ce qu'ils ont en commun

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

Ici, la version 1: onerror et onerror sont appelés. Cependant, d reçoit la src, malheureusement, c'est toujours générique.jpg.

• Graphique interactif d'Europe utilisant D3
• Lancer jsdom de Rhino sur Java
• D3.js exemple de flux – générer des valeurs de fonction de zone correctes
• Comment faire des étiquettes et des nœuds dans la structure forcée D3 cliquable pour naviguer vers une URL?
• Comment ajouter l'étiquette aux bords dans le graphique d3

  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, onload ou onerror est appelé. Mais la valeur de d.src est indéfinie lors de 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; } 

Voici la version 3: ça marche mais pas la première fois. Je dois faire des rafraîchissements pour obtenir les images correctement. Peut-être qu'il revient avant que l'image ne soit complètement chargée.

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

• Est-il pour vérifier si une variable js est une sélection d3?
• Éditez la visualisation interne de Radius de D3 Sunburst
• Comment faire pivoter le texte de l'axe des abscisses dans dimple.js?
• Plusieurs versions d'un script sur la même page (d3.js)
• D3js transforme les images de groupe imbriquées

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

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