Динамическое слайд-шоу JavaScript
-
03-07-2019 - |
Вопрос
У меня есть слайд-шоу на 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?
Решение
Я бы сказал:
- Попросите 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 +"\">");
});
});
Другие советы
Использование двоичных изображений и " предел n, 1 " - очень плохие решения.
Почему ваши изображения не хранятся в базе данных в виде ссылок на изображения? И изображения должны храниться в файловой системе. Запросы, подобные " Limit n, 1 " действительно очень медленно, особенно на больших столах. Вам нужно использовать небольшие запросы с большим смещением вместо множества запросов с небольшим смещением и упаковать данные в формате php в json для отправки в javascript. (предел 100 например) Отправка запроса AJAX для одного изображения очень расточительно.
Хорошее слайд-шоу вы можете найти здесь - plugins.jquery.com.