CODEWITHSUNDEEP
javascriptiphoneiosimageonload
Matt Urtnowski
Matt Urtnowski

Reputation: 2566

IPhone img onload fails

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.com/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.net/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.net/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.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

Upvotes: 1

Views: 5345

Answers (3)

Chris Wheeler
Chris Wheeler

Reputation: 1736

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.

Upvotes: 3

Matt Urtnowski
Matt Urtnowski

Reputation: 2566

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.com/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.net/PvY5t/10/

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

Upvotes: 5

robert.bo.roth
robert.bo.roth

Reputation: 1353

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.

Upvotes: 2

Related Questions