While most of the time you can check the images your using, either you uploaded them manually or your script will see and, if missing, replacing it with a placeholder image. Sometimes however thats not particularly practical, like when your working mostly in javascript and don’t want to make an ajax call just to see if there an image. Thats the situation I ran into yesterday, and the solution is… Continue reading “Auto replace broken images.”
Mobile Safari Webkit Flicking Animation Fix
Back from a little vacation/job change/illness, lets get back to it.
While developing a web based app with some seriously smooth animations behind it I noticed that they would flicker every time they started. Initially I thought it was due to the animation enhancer I had installed. The jQuery animation enhancer seamlessly changes the traditional jQuery animations with the CSS3 animations. On a desktop browser this has mixed results, with safari being faster and chrome being slightly slower, but on an iOS device (in this case an iPad) it was much much faster. Continue reading “Mobile Safari Webkit Flicking Animation Fix”
Improve iOS application responsiveness
If you’ve been working on an application (either web based or wrapped on in a cocoa layer) and you’ve noticed that it just seems slower than a native app then your not alone. I was experiencing this a while ago and wanted a decent way to fix it. After reading up the iOS developer guidelines and playing around a bit I found the reason, and a fix.
The cause of the problem is simple, the system is waiting. When you tap the screen it fires off a series of events, but not back to back. The <code>onclick</code> event, the one that most the web uses, it delayed a bit. This is done so the system has a chance to check for various gestures, primarily double click which zooms. The firing order goes something like this:
- touch start, as soon as your finger touches the screen.
- touch end, as soon as your finger leaves the screen
- mouse down, no less than 350 milliseconds after touchstart
- mouse up, about 5 milliseconds after mouse down
- click, 1 millisecond after mouseup
I’ve uploaded a page that shows the delays, you can check out the Fire Order Example here. There are two solutions to this, first is the overkill method, simple fake a click every time you touch the screen, something like this:
|
1 2 3 4 |
$('*').bind('touchstart',function(e){ $(this).click(); e.preventDefault(); }); |
That should work just fine, but personally I think it’s a bit overkill, instead I usually declare each click area with an initial control init. If your building an app with a lot of different inputs and want to clare them on the button using the inline <code>onclick=””</code> trigger than that might just me your ticked if you want a bit of speed improvement. Now I havent’ tested that code but it should work, if not I can test a trigger function that will work, just leave a a note in the comments.