title: Infinite loop with image.onload and image.onerror
body: <p>I'm trying to load and image and if the url is not valid, put an error image instead. In my case the onerror event seem to be called infinitely:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>function createImage(imageId) {
      var spinnerUrl = 'http://placehold.it/600&amp;text=spinner';
      var errorUrl = 'http://placehold.it/600&amp;text=error';
      var successUrl = 'http://placehold.com/600&amp;text=success';
      var img = new Image();
      img.onerror = function() {
          console.log('no image at url: ' + imageId);
          this.src = errorUrl;
      };
      img.onload = function() {
          this.src = successUrl;
      };
      img.src = spinnerUrl;   
      return img;
  };
  
  function loadImage(id) {
      document.getElementById(id).appendChild(createImage('image-id'));
  };
  
  loadImage('output');
  </code></pre>
  
  <p>you'll notice that the log displays 'no image at url: image-id'</p>