Задать вопрос
iNickolay
@iNickolay
javascript

Как организовать загрузку страницы по мере загрузки данных?

Здравствуйте! Столкнулся с проблемой в работе API, долго грузит страницу (порядка 13-17 сек)
Т.к. вообще не сталкивался в AJAX и jQuery (сейчас начал это исправлять), то даже не могу понять в какую сторону копать (гугл в основном выдаёт про поиск по мере ввода, провести аналогию на свой код я не смог)
Вообщем суть: делая запрос я получаю массив с пользователями, и затем на каждого пользователя делаю запрос об информации о нём
# Здесь как бы хранятся все пользователи
$usersArr = 'http://someapi.com/?userlist=' . $usersList;
/*
обрабатываю $usersArr до нужного вида
*/
foreach ($usersArr as $name => $id) {
    # Здесь делаю запрос а информацию о пользователе
    $userInfo = 'http://someapi.com/?userinfo=' . $id;
    /*
    обрабатываю $userInfo до нужного вида
    */
    # И, соответственно вывожу её
    echo $name . ' : ' . $userInfo['surname'] . ' : ' . $userInfo['phone'];
}
Код, естественно, упрощён для понимания.

Если не делать запрос на информацию о пользователе, то список пользователей выводится где-то до секунды.
Дак вот хотелось бы что бы список пользователей выводился сразу, а подробная информация - по мере поступления :)

Хотя бы ткните ссылкой, пожалуйста... Пол рабочего дня убил на поиски - безрезультатно :(
  • Вопрос задан
  • 2535 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
torrie
@torrie
Всё знаю, всё умею
Сперва делаем много div'ов с id аналогичными user.id, чтобы потом в них аяксом засунуть данные.

<?php 
echo '<html><head>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head><body>';
$usersArr = 'http://someapi.com/?userlist=' . $usersList;
foreach ($usersArr as $name => $id) {
 echo '<div id="id'.$id.'"></div>';
}
echo '<script>$(document).ready(function (){';
foreach ($usersArr as $name => $id) { echo '
    $.ajax({                                      
      url: "http://someapi.com/",              
      type: "get",          
      data: "userinfo='.$id.'",
      dataType: "html",                
      beforeSend: function() {
          $("#u'.$id.'").append("loading..");
          },
      success: function(data) {
// тут вывод в каждую ячейку
          $("#u'.$id.'").append(data);
          }
   });'; }
echo '});</script></body></html>';
?>
Ответ написан
9 комментариев
9 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тильда дизайн + сверстать + интеграции
16 апр. 2024, в 10:32
8000 руб./за проект
C# WPF десктопное приложение для алготрейдинга в сфере криптовалют
16 апр. 2024, в 09:59
50000 руб./за проект
Работы по сайту для оптимизации
16 апр. 2024, в 08:46
500 руб./за проект
Ещё заказы