XHR Image loading - feature detection

[alex_h]

I'm trying to add the option to load images via XHR, with normal Image object loading as fallback. Since getting the XHR response into an image is dependent on window.URL.createObjectURL I'm using this for my feature detection to know when to use the XHR method:

 

window.URL = window.URL || window.webkitURL;var useXHR = true;if (!window.URL.createObjectURL) {    useXHR = false}

In testing it seems that this might not be working for some platforms though. Apparently in Safari on the iPhone 4S running iOS 5.1.1, and in the Android Stock browser on a Samsung S2 running Android 4.2.2 the loading fails. My best guess is that these browsers are attempting to use the XHR system when they shouldn't be, since older versions of this game that just used basic image loading worked fine on those devices.

Is there a better method I could be using to choose when to go for XHR over good old Image.src + Image.onLoad ?

 

I suppose the other thing that could be going wrong is there seem to be various different ways to listen for progress, load complete and load errors with the XHR model, some of which are legacy methods, some are ie specific, etc. I am currently assigning a load complete function to the XHR instance onload like so:

xhr2.onload = function () {   //do something                 };

Perhaps this method will only work in some browsers? In which case, if the onload doesn't fire then my game will hang after the first image successfully loads.

Any pointers and advice will be gratefully received!

[Chris]

You should maybe also check if window.URL is defined. If its not defined, useXHR will always be true on that devices.

Maybe check it the other way around:

 

window.URL = window.URL || window.webkitURL;var useXHR = window.URL ? true : false;

[alex_h]

You are absolutely right Chris, after working on this for several hours last night I discovered that the problem was precisely that window.URL was not defined, so checking whether window.URL.createObjectURL existed was crashing the whole thing. Modifying the code to check whether window.URL existed fixed the issue on iOS, and I'm hoping it will now work on the Android devices too.

Thanks for your advice!