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

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

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

1. Создать веб-страницу.
2. Дайте странице подключиться к серверу и получите XML или JSON с идентификаторами для изображений.
3. Запрос изображений с сервера с использованием идентификатора из шага 2.

Answer 3

Использование двоичных изображений и «limit n, 1» - очень плохие решения.

Почему ваши изображения не хранятся в базе данных в виде ссылок на изображения? И изображения должны храниться в файловой системе. Запросы типа «Limit n, 1» действительно очень медленные, особенно на больших столах. Вам нужно использовать небольшие запросы с большим смещением вместо множества запросов с небольшим смещением и упаковать данные в формате php в json для отправки в javascript. (предел 100 например) Отправка запроса AJAX для одного изображения очень расточительно.

Хорошее слайд-шоу вы можете найти здесь - plugins.jquery.com.