1

我有一个 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，我可以用它做些什么吗？JavaScript 中是否有imagecreatefromstring()我缺少的函数？

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

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

4

3 回答 3

2

我会说：

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

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

您可以使用像 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 / 查询：

$(document).ready( function() {
   $.get( "image.php", function( data ) {
      $(document).append("<img src=\"data:image/jpeg;base64,"+ data +"\">");
   });
});
于 2009-03-06T09:55:03.600 回答
0

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

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

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

于 2009-03-06T14:45:24.167 回答
0
  1. 创建一个网页。
  2. 让页面连接到服务器并获取带有图像 ID 的 XML 或 JSON。
  3. 使用步骤 2 中的 ID 从服务器请求图像。
于 2009-03-06T22:34:46.487 回答