iphone上的非侵入式图像加载指示器

时间:2011-09-18 20:44:09

标签: iphone mobile css3 safari webkit

我正在寻找一种简单的方法来为Mobile Safari(以及可能的其他移动代理)在img元素上实现“加载”指示器。乍一看,在这些元素上使用background:属性似乎是要走的路。但有两个问题:

  • 当仅加载部分图像时,代理商倾向于开始渲染。结合装载指示器图像,这看起来很奇怪。
  • 我想将css3旋转动画(旋转)应用于加载指示器(而不是最终图像)。

content css属性设置为'',并且指示图像正在加载的简单类标记可以解决此问题。不幸的是,这也会以某种方式阻止Mobile Safari进行动画制作(虽然它似乎在Chrome中运行良好)。

其他(也许是更好的)解决方案会涉及多个元素,但我特别试图阻止这一点。 Css伪类:之前或:之后也不能与动画结合使用。

我的尝试如此:https://gist.github.com/1225523#file_loading.html

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

我建议spin.js基于CSS3并且不使用任何图像。您可以非常轻松地自定义您的微调器。

<强> SPIN.JS