How to load an other image, if the current image loads slow?
<p>I'm working on a HTML5 canvas game, and I want to load a high resolution image as background. This image is 10MB, so if the image loads slow, then I want to load a smaller image instead.</p>

<pre><code>var myimg = new Image();
myimg.onload = function() {
  clearTimeout(t);
  alert('high resolution image loaded');
};
mximg.src = 'path/to/highres.png';

var t = setTimeout(function(){
  //cancel loading somehow ?
  myimg.onload = function() {
    alert('low resolution image loaded');
  };
  myimg.src = 'path/to/low_res.png';
},5000);
</code></pre>

<p>should I cancel somehow the loading, or it's cancelled if I edit the src attribute?</p>
