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

Posted 2023-03-14

【中文标题】iPhone上的非侵入式图像加载指示器

【英文标题】：Unintrusive image loading indicator on iphone

【发布时间】：2011-09-18 20:44:09

【问题描述】：

我正在寻找一种简单的方法来在 Mobile Safari（可能还有其他移动代理）的 img 元素上实现“加载”指示器。乍一看，在这些元素上使用 background: 属性似乎是可行的方法。但是有两个问题：

当仅加载部分图像时，代理往往已经开始渲染。结合加载指示图像，这看起来很奇怪。 我想将 css3 旋转动画（旋转）应用到加载指示器（而不是最终图像）。

将 content css 属性设置为 '' 和一个指示图像正在加载的简单类标签可以解决这个问题。不幸的是，这也以某种方式阻止了 Mobile Safari 制作动画（尽管它似乎在 Chrome 中运行良好）。

其他（也许更好的）解决方案会涉及多个元素，但我特别想防止这种情况发生。 Css 伪类 :before 或 :after 也不能与动画结合使用。

到目前为止我的尝试：https://gist.github.com/1225523#file_loading.html

有什么建议吗？

【参考方案1】：

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

SPIN.JS

【讨论】：

这不能回答我的问题。我正在寻找一种将微调器放在仍在加载的图像资源（img 元素）之上的方法。然后使用不需要侵入 DOM 的方法。