iPhone 上的无干扰图像加载指示器
我正在寻找一种简单的方法来在 Mobile Safari（可能还有其他移动代理）的 img 元素上实现“正在加载”指示器。乍一看，在此类元素上使用 background: 属性似乎是正确的选择。但存在两个问题：
- 当仅加载部分图像时，代理往往已经开始渲染。与加载指示器图像结合起来，这看起来很奇怪。
- 我想将 css3 旋转动画（旋转）应用于加载指示器（而不是最终图像）。
将 content css 属性设置为 '' 并设置一个指示图像正在加载的简单类标记可以解决此问题。不幸的是，这也在某种程度上阻止了 Mobile Safari 执行动画（尽管它在 Chrome 中似乎工作正常）。
其他（也许更好）的解决方案将涉及多个元素，但我特别试图防止这种情况发生。 CSS 伪类 :before 或 :after 也不能与动画结合使用。
到目前为止我的尝试： https://gist.github.com/1225523#file_loading.html
有什么建议吗？
I'm looking for a simple method to implement a 'loading' indicator on img elements for Mobile Safari (and possibly other mobile agents). At first sight, using the background: property on such elements seems the way to go. There are two problems though:
- Agents tend to start rendering already when only part of the image is loaded. This looks pretty weird in combination with the loading indicator image.
- I'd like to apply a css3 rotation animation (spin) to the loading indicator (and not to the final image).
Setting the content css property to '' and a simple class-tag that indicates the image is loading would work around this. Unfortunately, this also somehow prevents Mobile Safari from doing the animation (although it seems to work fine in Chrome).
Other (and perhaps better) solutions would involve multiple elements, but I am specifically trying to prevent this. Css pseudo classes :before or :after also do not work in combination with animations.
My attempt thusfar: https://gist.github.com/1225523#file_loading.html
Any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我建议
spin.js完全基于 CSS3，并且不使用任何图像。您可以非常轻松地定制您的微调器。SPIN.JS
I would suggest
spin.jsthat is all CSS3 based and it don't use any image. You can customize your spinner very easy.SPIN.JS