3

私はJavaScriptを初めて使用するため、可変スコープについて混乱しています...画像をロードし、画像が存在しない場合は別のURLに置き換えようとしています。私は純粋なJavaScriptでそれをしなければなりません。

ここでは、2つのバージョンが非常に似ていますが、パフォーマンスが異なります。唯一の共通点は、機能しないということです。3番目のバージョンは更新が必要であり、IEでは機能しません。dはnumber属性のオブジェクトであり、問​​題はありません。

これが彼らの共通点です

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

ここでバージョン1：両方onloadとonerrorが呼び出されます。ただし、dはsrcを受け取りますが、残念ながら常に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;
  }

ここでバージョン2：イメージの存在に応じて、onloadまたはonerrorのいずれかが呼び出されます。ただし、アラート時のd.srcの値は未定義です。

  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;
  }

ここでバージョン3：動作しますが、初めてではありません。画像を正しく取得するには、更新を行う必要があります。おそらく、画像が完全に読み込まれる前に戻ってきます。

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

2 に答える 2

15

割り当てではなく、関数を呼び出しています！

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

する必要があります

img.onload = onLoadHandler;
img.onerror = onErrorHandler;
于 2012-09-20T12:29:37.380 に答える
1

2番目の例の問題は、他のコードが評価された後、画像が読み込まれたときに画像のコールバックが発生することです。あなたのコードが何を成し遂げるかは本当にわかりませんが、このようなことを試してみてください。

  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;
  };
于 2017-09-19T09:57:31.893 に答える