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，我可以用它做任何事情吗？我缺少JavaScript中的imagecreatefromstring()函数吗？

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

编辑：我喜欢这个第一个建议，我想我可以做到这一点。它也将使我能够遵循alex shishkin建议的一部分来避免LIMIT n，1个查询（我确实希望保留SQL BLOB字段）但是如何将XML中的二进制数据粘贴到JavaScript中的Image（）对象？ / p>

Answer 1

我会说：

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

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

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

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

这将适用于除Internet Explorer之外的所有内容，您可以使用Dean Edwards的neat trick将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

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

动态JavaScript幻灯片

3 个答案: