背景:
我正在尝试开发一个可以集成到我们的移动富媒体广告中的加载屏幕插件。其中一些广告使用多个图像来制作翻页式动画,因此这样的内容非常有用。它需要在 iPhone 4.0+ 和 Android 2.2+ 上运行,最好在 Windows Phone 7.1 上运行。
我过去编码加载屏幕的方式是创建一系列图像对象并将其源设置为图像 url。然后,对于该对象的每个 onload、onerror 或 onabort 事件,我会将加载过程增加 1 并将其显示在加载屏幕覆盖层上。
然而,根据团队成员的建议,我一直在研究使用数据 URI 将图像数据直接编码到网页上,使用 PHP。这种方法的唯一缺点是,如果有大量图像,它可能会导致网页打开缓慢。
几天前我发现 Mark Kolich 的博客文章,其中他使用 data uri 在服务器端脚本中对一系列图像进行编码,将其包装在 json 响应中,然后将所有这些图像文件发送回他的网站应用。这是一个好主意,但是,如果我在加载屏幕中使用这个概念,那么加载进度将在一个 ajax 请求中从 0% 变为 100%。因此,如果加载过程需要几秒钟,则可能不足以刺激响应来保持访问者的兴趣。我需要在中间展示一些进展。
要做的事情:
因此,我需要做的是采用 Mark 的方法并找出如何使响应更加实时。我想要做到这一点,这样我就可以将一个包含图像列表的 AJAX 请求发送到我的加载器 php 脚本,并让我的 php 脚本每次(或每隔一次,或每 5 次等)成功地 ping 回多个响应并进行更新完成了这些图像的读取和编码。
我意识到我可能把事情复杂化了; php 脚本处理这些图像的速度非常快,以至于返回客户端代码的喋喋不休将毫无意义,因为它很快就会完成。在这种情况下,使用 setTimeouts sudo 模拟与这些图像相关的加载过程可能更有意义,直到 JSON 响应返回。或者我可能走在正确的轨道上,并且存在一定的阈值,我应该开始考虑这种方法,因为加载时间太长。
有什么想法吗?有什么例子吗?
Background:
I'm trying to develop a loading screen plugin that can be integrated into our mobile rich media ads. Some of these ads use several images for flipbook-style animations, so something like this would be really useful. It needs to work on iPhone 4.0+ and Android 2.2+ and, ideally, Windows Phone 7.1.
The way I've coded loading screens in the past I would create a series of image objects and set its source to the image url. Then for each onload, onerror, or onabort event for that object, I'd increment the loading process by 1 and display it on the loading screen overlay.
However, upon a team member's suggestion, I've been doing some research into using data URIs to encode the image data onto the webpage directly, using PHP. The only draw back to this approach is it can cause the web page to open slowly if there are a lot of images.
A few days ago I found a blog post by Mark Kolich in which he used data uri to encode a series of images in a server side script, wrap it in a json response, and then send all those image files back to his web application. Its a great idea, however, if I used that concept in my loading screen, then the loading progress would go from 0% to 100% in one ajax request. As a result, if the loading process takes a few seconds, that might not be enough response stimulation to keep the visitor's interest. I need to show some progress in the middle.
To do:
Therefore, what I need to do is take Mark's method and figure out how I can make the responses a little more real-time. I want to make it so I can send one AJAX request with a list of images to my loader php script and have my php script ping back with multiple responses with updates every time (or every other time, or every 5th, etc) it successfully finished reading and encoding these images.
I realize that I might be over complicating it; that the php script is going to process those images so fast that the chatter going back to the client side code will be pointless because it'll be done in no time. In which case it might make more sense to sudo-simulate the loading process involved with those images using setTimeouts, until the JSON response comes back. Or I might be on the right track and there is a certain threshold I should start taking this approach into consideration because the load time is taking too long.
Any ideas? Any examples?
发布评论
评论(2)
正如 @Marc B 所说,Comet 或 WebSockets 解决方案(支持旧版 Web 浏览器)绝对是您正在寻找的解决方案。
Comet 可能有点难以理解,最终 HTTP 流和 HTTP 长轮询解决方案都是 HTTP 的解决方案。 WebSocket 是一种更好的方法,因为它们是标准化的,并且在我看来,它们正在成为服务器和客户端双向实时通信的标准。 PHP 实时基础架构有一些解决方案:
如果您更愿意使用托管服务来消除安装和维护的痛苦您的实时基础设施,特别是如果您只想在事件发生时(当应显示新图像或更新数据库等时)将更新从服务器推送到客户端(iOS、Android、WP7 上的浏览器),则托管解决方案绝对是一个不错的选择(注意:我为托管解决方案提供商工作)。
我在这里编制了托管解决方案列表:
请参阅:托管实时技术
As @Marc B say, Comet, or a WebSockets solution (with fallback for older Web Browsers) is most definitely the solution you are looking for.
Comet can be a bit tricky to get your head around and ultimately HTTP Streaming and HTTP Long-polling solutions are work arounds for HTTP. WebSockets are a much better approach since they are standardised and, in my opinion, are becoming the standard for server and client bi-directional realtime communication. There are a few solutions for realtime infrastructure for PHP:
If you would rather use a hosted service which removes the pain of installing and maintaining your realtime infrastructure and especially if you just want to push updates from your server to the client (Browser on iOS, Android, WP7) when an event occurs (when a new image should be displayed or the db is updated etc.) then a hosted solution is definitely a good option (Note: I work for a hosted solution provider).
I've compiled a list of hosted solutions here:
See: Hosted realtime technologies
尝试Comet。它允许多部分响应,这可以让您获得这些定期更新,但仍然只有一个 HTTP 请求正在进行。
Try Comet. It allows multi-part responses, which'd let you get those periodic updates, but still only have one single HTTP request going.