php - 动态 JavaScript 幻灯片

Question

我有一个 JavaScript 幻灯片，它从 MySQL 数据库中预加载图像，然后在 HTML 文档的图像标记中一次显示一个图像。简而言之，它通过预加载图像来实现这一点，就像网络上显示的许多幻灯片教程一样，但它不是使用静态图像(即 images/image1.jpg 等)，而是使用通过 PHP 提供的动态图像(即 getData.php?n =1) getData.php 脚本在服务器上运行，并为每个预加载的图像打开一个到数据库的新连接。

有没有办法避免与数据库建立如此多的连接，并让每个连接只对图像数据库进行一次查询，限制为 n,1？

看来，如果我要使用 getData.php 作为 image.src，那么 getData.php 需要一次返回一个图像!我真的很想以 10 个为一组获取它们，然后在客户端将它们一个一个地分配给 Image() 对象。我认为这会更快，因为当我用 python 编写一个客户端应用程序来显示图像(当然是在浏览器之外)时，10 个左右的 block 传输速度更快(并减少了 mySQL 服务器上的负载)。我可以使用 JavaScript 和 PHP 来实现吗？我是否在两者之间使用 XML？如果我可以使用 AJAX 将二进制图像数据转换为 JavaScript，我可以用它做任何事情吗？我是否缺少 JavaScript 中的 imagecreatefromstring() 函数？

我可以自己找出确切的代码，但我是网络编程的新手，需要有关如何解决此问题的提示!我想我缺少一些主要框架。我是否需要 ActionScript 或 JavaScript 以外的东西来解决这个问题？提前感谢您的提示!

编辑:我喜欢第一个建议，我认为我可以完成它。它还将使我也能遵循 alex shishkin 的部分建议以避免 LIMIT n,1 查询(尽管我确实想保留 SQL BLOB 字段)但是如何将 XML 中的二进制数据粘贴到 JavaScript 中的 Image() 对象中？

Answer 1

我会说:

• 让 getData.php 生成一个 XML 文件，其中包含接下来的 10 张图像。
• 使用 javascript 从 AJAX 请求获取 XML 响应到 getData.php。
• 一张一张地遍历 XML 响应中的图像，当显示第九张图像时，查询 getData.php 以获取下一组图像。

关于框架:我的建议是同时使用 JQuery 进行 AJAX 请求以及图像显示和预加载。

---

您可以使用二进制到文本的编码(如 base64)通过 XML 传递二进制数据。在大多数浏览器中，您可以单独使用 base64 解码并将其传递给图像对象，如下所示:

<img src="data:image/jpeg;base64,your binary data comes here">

这将在除 Internet Explorer 之外的所有系统中工作，您可以使用 neat trick Dean Edwards 将 base64 数据传回 IE 的 PHP 模块 :)

将 JQuery 和 PHP 用于简单图像(没有幻灯片...这只是我的测试代码)代码看起来像这样:

PHP:

<?php
   echo base64_encode(file_get_contents("image.jpg"));
?>

JS/JQuery:

$(document).ready( function() {
   $.get( "image.php", function( data ) {
      $(document).append("<img src=\"data:image/jpeg;base64,"+ data +"\">");
   });
});