Question

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.

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

should I cancel somehow the loading, or it’s cancelled if I edit the src attribute?

Answer 1

One alternative “solution” would be to load the low-res image first. Only if it loaded quickly enough you start to load the high-res version to replace it.

There are three possible benefits as I see it:

1. You avoid having to worry about cancelling the load 🙂
2. You avoid loading unnecessary data (the partially downloaded high-res image) when the user is on low bandwidth, but instead load unnecessary data (the complete low-res image) when the user is on high bandwidth (in which case it doesn’t matter that much anyway).
3. While you load the high-res image, you have the option to show the low-res image as a placeholder (requires that you load the low-res and high-res images into two separarate DOM Image objects and swap out the low-res with the high-res).