Я постараюсь быть здесь максимально подробным.
Приложение, над которым я работаю, позволяет администраторам создавать папки, а затем загружать фотографии в эту папку.Дисплей похож на Pinterest, где он загружает все фотографии в коллаж на одном экране.Он отлично работает, когда у вас всего 5-6 фотографий, но это случается редко.Как только вы начнете получать намного больше фотографий, оно станет медленнее.Другое дело, что всякий раз, когда вы удаляете изображение или повторно входите в эту папку, весь дисплей должен быть перезагружен.Мне нужен какой-то способ кеширования этих изображений.
Вот логика моего сценария:
На dashboard.php, есть два включения в JavaScript: homepageActions.js и fileManager.js.homepageActions.js имеет скрипт document.ready(), который вызывает функцию javascript, showFiles().
Таким образом, для краткости, как только загружается документ, вызывается функция showFiles(),Эта функция выглядит следующим образом:
function showFiles(directoryName) {
$.ajax({
url: 'displayRecords.php',
type: 'post',
data: ({directoryName:directoryName}),
dataType: 'json',
success: function(data) {
constructTable(data);
$(document).find("a[rel*='lightbox']").lightBox();
}
});
}
В эту функцию передан путь к папке.Оттуда AJAX-скрипт вызывает PHP-скрипт, который просматривает эту папку и получает список всех каталогов и изображений в этой папке.Затем он создает строку JSON, в которой содержатся сведения о каждой подпапке и изображении в папке, в которую он был первоначально передан. Как только этот сценарий успешно возвращается, вызывается другая функция constructTable(data), которая передает строку JSON в функцию.
Вот тут-то и начинаются проблемы.
Функция constructTable() содержит около 240 строк кода, которые я не буду здесь включать, потому что за ней трудно следить,Подводя итог, эта функция анализирует строку JSON, выясняет, какие записи являются каталогами, а какие - файлами.Из этого он создает два массива: массив папок и массив файлов.
Сначала я обрабатываю все папки и отображаю их соответствующим образом.С этой частью все в порядке, и меня это не беспокоит.
После этого я начинаю просматривать изображения.Для каждого изображения я пишу много кода вокруг него.Есть div, ссылки и другая разметка HTML, окружающая каждое изображение.Короче говоря, у меня есть цикл for ... next, который просматривает каждый путь к файлу (собранный из JSON), и я создаю длинную строку HTML, которую затем использую jQuery для добавления в DIV.Так что в конечном итоге это выглядит примерно так:
for (var a = 0; a < numPhotos; a++) {
photoCode += "<div id='outside-container-"+a+"'>";
photoCode += "<a rel='lightbox' class='photo-link' href='"++"'>";
photoCode += "<img src='http://" + rootURL + "/uploads/"+fileNameArray[a] + "' width='200' class='photo-thumb'/></a>";
photoCode += "</div>";
$("#column1").append(photoCode);
}
Теперь - как я уже говорил, когда в папке всего пара фотографий, это не проблема.Однако, когда мы начинаем набирать более высокие цифры, это становится проблемой.Итак, с учетом вышесказанного, есть ли способ сохранить эти фотографии в кеше браузера, чтобы они загружались намного быстрее после начальной загрузки?