IPhone img onload fails

Question

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

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, Sep 12 '13 at 20:18
http://stackoverflow.com/questions/11805945/mobile-safari-reliable-callback-for-when-image-loads — Daniel, Sep 12 '13 at 20:29
@Daniel I already define the onload before setting the src. Also I already tried to use `new Image()`. Still didn't work. What are you getting at? http://jsfiddle.net/PvY5t/6/ — Matt Urtnowski, Sep 12 '13 at 20:33
I'm wondering the same thing you are @Murtnowski... Why is it only working for the 2nd image? — robert.bo.roth, Sep 12 '13 at 20:54

Matt Urtnowski · Accepted Answer · 2013-09-12T21:16:49.480

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.

Years later and this still holds true … was banging my head against the keyboard. Thanks. — Phillip Dodson, Jul 30 '15 at 18:49

score 3 · Answer 2 · answered Jan 14 '16 at 11:19

3

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.

answered Jan 14 '16 at 11:19

Chris Wheeler

1,623
1
11
18

score 2 · Answer 3 · answered Sep 12 '13 at 21:02

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.

Server is Dreamhost. No monkey business should be going on. – Matt Urtnowski Sep 12 '13 at 21:13 — Matt Urtnowski, Sep 12 '13 at 21:13

IPhone img onload fails

3 Answers3