动态 JavaScript 幻灯片

Question

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

无论如何，是否可以避免与数据库建立如此多的连接，并且让每个连接仅使用 LIMIT n,1 对图像数据库进行一次查询？

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

我可以自己计算出确切的代码，但我是网络编程新手，需要有关如何解决此问题的提示！我认为我缺少一些主要框架。我是否需要 ActionScript 或 JavaScript 以外的其他语言来解决此问题？感谢您提前提供提示！

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

Answer 1

我会说：

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

至于框架：我的建议是使用 JQuery 来处理 AJAX 请求以及图像显示和预加载。

---

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

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

这适用于除 Internet Explorer 之外的所有浏览器，您可以使用 巧妙的技巧 由 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 +"\">");
   });
});

Answer 2

使用二进制图像和“限制n，1”。 - 非常糟糕的解决方案。

为什么您的图像没有存储在数据库中作为图像的链接？图像必须存储在文件系统中。 像“Limit n，1”这样的查询非常慢，特别是在大桌子上。 您需要使用具有大偏移量的小查询，而不是使用较小偏移量的许多查询，并使用php到json格式将数据打包以发送到javascript中。 （例如限制100） 发送一张图片的ajax请求非常浪费。

你可以在这里找到漂亮的幻灯片 - plugins.jquery.com。

Answer 3

1. 创建网页。
2. 让页面连接到服务器并获取带有图像ID的XML或JSON。
3. 使用步骤2中的ID从服务器请求图像。