I have some very simple code that works in on the desktop with Chrome, Firefox, IE, and Safari on the Desktop, but when I try it on my Iphone it fails.

It's basically

var img1 = document.createElement('img');

img1.onerror = function() {
    console.log('img1 fail');
};

img1.onload = function() {
    console.log('img1 success');
};

img1.src = '.png';

The problem is that on the IPhone the onerror function runs instead of the onload. For the desktop the onload runs just fine and there is no onerror.

/

With the fiddle img1 fails for an unknown reason and img2 is a success.

Can someone please tell me how to get the onload to run sucessfully for img1 and img2 on the IPhone?

EDIT:

Very interesting. I resaved the img as a jpg and now it works / Can someone please provide some color on why this might be.

EDIT2:

These links here seem very relevant

(Really) Long Background Image Does Not Render on iPad Safari

.html

I have some very simple code that works in on the desktop with Chrome, Firefox, IE, and Safari on the Desktop, but when I try it on my Iphone it fails.

It's basically

var img1 = document.createElement('img');

img1.onerror = function() {
    console.log('img1 fail');
};

img1.onload = function() {
    console.log('img1 success');
};

img1.src = 'http://gvgmaps./linktothepast/maps/LegendOfZelda-ALinkToThePast-LightWorld.png';

The problem is that on the IPhone the onerror function runs instead of the onload. For the desktop the onload runs just fine and there is no onerror.

http://jsfiddle/PvY5t/4/

With the fiddle img1 fails for an unknown reason and img2 is a success.

Can someone please tell me how to get the onload to run sucessfully for img1 and img2 on the IPhone?

EDIT:

Very interesting. I resaved the img as a jpg and now it works http://jsfiddle/PvY5t/9/ Can someone please provide some color on why this might be.

EDIT2:

These links here seem very relevant

(Really) Long Background Image Does Not Render on iPad Safari

https://developer.apple./library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

• javascript
• iphone
• ios
• image
• onload

• imgs are not required to fire onload according to W3C spec – Daniel Commented Sep 12, 2013 at 20:17
• ah well, how can i check and run a function on when the img has loaded? Also then why does img1 fail and img2 succeed? – Matt Urtnowski Commented Sep 12, 2013 at 20:18
• neither load for me. Latest chrome – John Riselvato Commented Sep 12, 2013 at 20:21
• Chrome 28.0.1500.95 m works for me. Both run the onload. – Matt Urtnowski Commented Sep 12, 2013 at 20:22
• 1 I'm wondering the same thing you are @Murtnowski... Why is it only working for the 2nd image? – robert.bo.roth Commented Sep 12, 2013 at 20:54

3 Answers 3

Ok I think the answer is this.

I am trying to use a PNG file that is 4096 x 4096

However this apple link

https://developer.apple./library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

says for PNGs my image must be

width * height ≤ 3 * 1024 * 1024

Clearly I am over the known iOS resource limit.

Max image size for a square should be sqrt(3 * 1024 * 1024) which is like 1773px. Sure enough when I shrink the image to 1770px it works http://jsfiddle/PvY5t/10/

JPEGs have a different resource limit, so my jpg that worked didn't hit that limit.

I came across this issue on iOS 9 because I had set img.crossOrigin = "anonymous".

Removing that allowed large photos direct from the camera to load on an iPad.

So I was doing some network profiling in Safari on my iOS Simulator, and it seems like the first image is being requested fine (Response Status 200, OK, and the image seems to be loaded). Still unsure why it's firing the onerror event rather than the onload event though. I'm guessing it has something to do with the headers that Javascript's expecting to get back when the image is loaded, but I can't seem to track it down. Stay tuned for edits.

Edit: do you own/manage the server where the image is hosted? If so it's possible your server is doing something funky when it's serving .png images.