Динамическое слайд-шоу 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 между ними?Если бы я мог перенести данные двоичного изображения в JavaScript с помощью AJAX, мог бы я что-нибудь с ними сделать?Есть imagecreatefromstring() функция в JavaScript, которую мне не хватает?

Я могу самостоятельно разобраться с точным кодом, но я новичок в веб-программировании, и мне нужен совет, как решить эту проблему!Я думаю, что мне не хватает какой-то части основной структуры.Нужен ли мне для решения этой проблемы ActionScript или что-то другое, кроме JavaScript?Заранее спасибо за подсказку!

РЕДАКТИРОВАТЬ:Мне нравится это первое предложение, и я думаю, что смогу его реализовать.Это также позволит мне следовать части предложения Алекса Шишкина, чтобы избежать запросов LIMIT n,1 (хотя я хочу сохранить поля SQL BLOB). Но как мне вставить двоичные данные из XML в объект Image() в JavaScript?

Answer 1

Я бы сказал:

• Попросите getData.php сгенерировать XML-файл, содержащий следующие 10 изображений.
• Имейте javascript, чтобы получить ответ XML от AJAX-запроса к getData.php.
• Просмотрите изображения в ответе XML одно за другим и, когда отобразится девятое изображение, запросите у getData.php следующий набор изображений.

Что касается рамки:Мой совет — использовать JQuery как для запроса AJAX, так и для отображения и предварительной загрузки изображений.

---

Вы можете использовать кодировку двоичного кода в текст, например base64, для передачи двоичных данных через XML.В большинстве браузеров вы можете использовать декодирование base64 отдельно и передать его объекту изображения следующим образом:

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

Это будет работать во всех браузерах, кроме Internet Explorer. Вы можете использовать хитрый трюк Дин Эдвардс, чтобы передать данные base64 обратно в модуль PHP для IE :)

Использование 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

<Ол>

Создайте веб-страницу.

Дайте странице подключиться к серверу и получите XML или JSON с идентификаторами изображений.

Запросите изображения с сервера, используя идентификатор из шага 2.