移动开发tips

click事件300ms延迟

使用canvas代替img标签加载图片：
使用canvas 和img标签渲染图片的区别：canvas能够触发手机本身的GPU加载图片，渲染图片性能更快，很好的利用手机的性能；而img标签用的是浏览器自带的内存渲染图片，性能有所损耗。

图片预加载/懒加载(image object)
var image = new Image();
image.onload=function(){debugger};
image.src=""

使用zepto.js时要想使tap事件生效，需要加载touch.js模块。

使用animate.css动画时，动画结束之后动画类名仍在dom上，要想使dom恢复到原始状态，需要在动画结束之后移除动画类名。可以通过监听 webkitAnimationEnd 事件达成。
例如：

domImage.addEventListener('webkitAnimationEnd',function(){
    lImage.removeClass('animated bounceInRight');
      // 完成之后就不用继续监听了，需要第二个参数；不移除不影响效果
    domImage.removeEventListener('webkitAnimationEnd',arguments.callee);
},false);

addEventListener()和removeEventListener()是对应的，有三个参数。第一个参数是event，第二个参数是函数function，都是必须的；第三个参数是布尔值，是否冒泡，可选的参数。
removeEventListener()：第一个参数是要移除的事件，和addEventListener()监听的事件一致；第2个参数指向函数，可以使用arguments.callee（相当于指针，指向当前函数），也可以传个null。
示例中removeEventListener()没有第二个参数也能执行，但是控制台会不但报错提示需要第二个参数，可以传个null或arguments.callee。

-webkit-animation动画有三个事件：
开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration

项目示例：移动端web相册

https://github.com/gyuxiaoyan/web-