Загрузка содержимого AJAX перед их фактическим отображением

115
13

Я загружаю запрос AJAX после завершения анимации. Однако я хотел бы загрузить ajax, hide(), где я его загрузил, а затем просто показать() после завершения анимации. Идея заключается в том, что мне не придется беспокоиться о том, что пользователь ждет загрузки изображения, и что я могу реплицировать его во всех местах, где я жду окончания анимации. Даже текст.

Я мог бы просто поместить его в какой-то div в виде display: none ;, и скрыть его, но это беспокоит меня, что он по-прежнему технически "там" на странице. Есть ли способ загрузить контент где-нибудь, где пользователь вообще не видит его?

Решаемые. Это правда, что я не хотел этого в DOM и надеялся, что есть какой-то CSS3/HTML5 что-то, что бы "удерживать" элементы. : P Кроме того, я знал, что у других был отличный способ сделать это, поэтому мне нужно было лучшее. Кажется, я понял. Всем спасибо.

спросил(а) 2021-01-28T00:00:40+03:00 3 месяца, 1 неделя назад
1
Решение
62

Вы можете загрузить контент с экрана (например, position: absolute; left: -500px;), но это не отличается от загрузки его там, где вы хотите, и установки его display: none. Кроме того, вам придется переместить его, прежде чем показывать его.


Я думаю, что первое предложение во втором абзаце - это то, что вы должны сделать: загрузите его в div, который будет display: none как display: none, а затем просто сбросите свойство отображения или затушите элемент, когда ваша анимация закончится.

ответил(а) 2021-01-28T00:00:40+03:00 3 месяца, 1 неделя назад
62

Создайте класс css, например:

.hiddenelement
{
position:absolute !important;
left:0% !important;
top:0% !important;
width:0% !important;
height:0% !important;
}

используйте .addClass('hiddenelement') когда вы скрываете элемент, и .removeClass('hiddenelement') когда вы показываете его.

Конечно, это не сработает, если у вас встроенные стили отмечены !important.

Примечание. Я считаю, что это, вероятно, будет работать без позиционирования.

ответил(а) 2021-01-28T00:00:40+03:00 3 месяца, 1 неделя назад
62

У вас это точно. Вы должны загрузить контент в контейнер на странице, чтобы браузер знал, что ему нужно его обработать. Нет ничего "неправильного" в том, чтобы делать это таким образом, так что не позволяйте этому беспокоить вас :)

var container = $('#myContainer');
container.hide();
container.html(ajaxResult);
container.fadeIn();

Это должно сделать это...

Я думаю, вы могли бы это сделать:

$('#myContainer').hide().html(ajaxResult).fadeIn();

ответил(а) 2021-01-28T00:00:40+03:00 3 месяца, 1 неделя назад
44

Похоже, вы пытаетесь решить проблему, которая не нуждается в решении. Пользователю все равно, что он "там" где-то, и так как вы так скоро покажете его, вам не нужно "скрывать" его. Тем не менее, если вы используете .ajax() вместо .load() вас будет полный контроль возвращенных данных; вам не нужно добавлять его в DOM, пока не захотите. После этого в DOM вы можете использовать .detach() чтобы удалить его, не уничтожая его, если вам понадобится его позже.

ответил(а) 2021-01-28T00:00:40+03:00 3 месяца, 1 неделя назад
45

Не уверен, что я правильно понял, но вы можете сделать что-то вроде:

start_animation();
$.get('url', function(response) { stop_animation_and_show_content(response); });

function stop_animation_and_show_content(html) {
// ...
}

ответил(а) 2021-01-28T00:00:40+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема