Здравствуйте. Обычно я пишу сайты без сложных серверных кусков и структур, но в этот раз волею случая был вынужден работать с незнакомой для меня сферой.
Необходимо реализовать альбом, в котором фотографии будут подгружаться из БД, когда пользователь скролит до последнего фото. Ввиду своей некомпетентности, решил использовать знакомую платформу jQuery для отслеживания положения скроллинга и позиции последнего элемента, а так же для отправки ajax запросов на сервер. Как раз на ajax запросах и возник конфликт между сервером и клиентом.
Алгоритм: Когда пользователь заходит на страницу, сервер отправляет ему 20 фотографий. При прокрутке на последнее фото отправляется еще 10 фотографий и так пока они не кончатся.
Проблема: Во время загрузки фото происходит некая ошибка, из-за которой в src фотографий остается поле: (unknown).
var id = 1;
var getLink = function(id) { //Получаем url очередного id
var url = "";
$.ajax({
url: "source/php/album/getLink.php", //Получаем url
type: "POST", //Скрыто от пользователя
date: {
id: id
},
success: function(date) {
url = date;
},
error: function(date) {
console.log(date + "::error_2");
}
});
return url;
}
//Приведен фрагмент программы с генерацией первых 20 фото.
for (var i = 0; i < 20; i++) {
var url = getLink(id); // Вот тут возникает интересная ситуация
// Мы получаем линк из бд, но ajax, похоже, не ждет, когда сервер ответит, и присваивает нулевую ссылку. (Могу ошибаться).
$(".album").append('<img class="album_photo" src = "' + url + '" name = "id_' + id + '">');
id++;
}
<section class="album">
<img class="album_photo" src="source/images/ajax-loader.gif">
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
P.S: Если выводить url в console.log, то он отображается.