背景:
我正在尝试开发一个加载屏幕插件,可以集成到我们的移动富媒体广告中。其中一些广告使用几张图片来制作翻书式动画,所以这样的东西真的很有用。它需要在 iPhone 4.0+ 和 Android 2.2+ 上运行,最好是在 Windows Phone 7.1 上运行。
我过去编写加载屏幕的方式是创建一系列图像对象并将其源设置为图像 url。然后对于该对象的每个 onload、onerror 或 onabort 事件,我会将加载过程增加 1 并将其显示在加载屏幕叠加层上。
但是,根据团队成员的建议,我一直在研究使用数据 URI 将图像数据直接编码到网页上,使用 PHP。这种方法的唯一缺点是如果有很多图像,它会导致网页打开缓慢。
几天前,我发现了 Mark Kolich 的一篇博文,其中他使用 data uri 在服务器端脚本中编码一系列图像,将其包装在 json 响应中,然后将所有这些图像文件发送回他的 Web 应用程序。这是一个好主意,但是,如果我在加载屏幕中使用该概念,那么加载进度将在一个 ajax 请求中从 0% 变为 100%。因此,如果加载过程需要几秒钟,那可能不足以保持访问者的兴趣。我需要在中间展示一些进展。
去做:
因此,我需要做的是采用 Mark 的方法并弄清楚如何使响应更加实时。我想这样做,这样我就可以向我的加载器 php 脚本发送一个带有图像列表的 AJAX 请求,并让我的 php 脚本每次(或每隔一次,或每 5 次等)更新多个响应并返回成功完成了这些图像的读取和编码。
我意识到我可能过于复杂了。php 脚本将如此快速地处理这些图像,以至于返回客户端代码的喋喋不休将毫无意义,因为它会立即完成。在这种情况下,使用 setTimeouts 模拟与这些图像相关的加载过程可能更有意义,直到 JSON 响应返回。或者我可能走在正确的轨道上并且有一个阈值我应该开始考虑这种方法,因为加载时间太长了。
有任何想法吗?有什么例子吗?