Как сделать loader при загрузке ajax pop-up?

Question

[Чёкатилло]

Есть у меня попап В него подгружаются страницы постов Когда в нем подгружается новая страница, то открытый до нее контент еще отображается, пока не загрузится новая Как сделать так, что бы старая до загрузки новой не отображалась, а отображался лоадер до появления новой страницы?
Сайт на Вордпресс
Спасибо!

Answer 1

[Анатолий]

Я бы сделал promise или отключаем асинхронность аякса, перед отправкой запроса подгружаем гифку лоадера. потом, когда получаем ответ сервера. вместо гифки втыкаем новое содержимое. Или, гифка в попапе висит всегда (в DOM), пока ее не заменит ответ сервера. Как-то так.

док. jquery, содержит отличные примеры, включая промисы.

Либо искать подходящий плагин ))

Comments

[Чёкатилло]

Ага Для меня это дебри Спасибо )

[Анатолий]

Дмитрий: кстати, можно плагин написать, который будет отслеживать попап и в нужное время, в нужном месте, совершать требуемые операции. Ну вы поняли.. ))
Я когда начинал, пилил, все, что пилится, а что не пилится - делал деревянным и пилил. Та и сейчас, ничего не изменилось. Возможно, это возможно: открываете попап, жмете правую кнопку мыши, далее, "исследовать элемент", потом кликаете на попап, так, чтобы выделилась область, куда подгружаются данные. Потом закрываете попап, нужно найти то место где изменяется DOM, это в принципе, при наличии опыта, можно просто глазами сделать, но если нет, можно увидеть это в инструментах разработчика браузера. Находите этот div (скорей всего div) и втыкаете туда лоадер (gif), по идее данные должны замостить содержимое div и лоадер исчезнет. Ну вот например:

Если там используется метод вставки, тады ой. Потому как если совсем темный лес, то это другая тема. Но можно css'ом сделать, чтобы все что выходит за рамки попапа, на странице было не видно или задать свойства так, чтобы контент появлялся над картинкой, при помощи z-index. Но это тоже другая тема, короче, если захотеть - можно! ;)

[Анатолий]

Вот HTML который прошел в тело коммента, я думал он будет выглядеть так:
<div id="content"><img src="image/ajax_loader.gif" alt="ajax_loader.gif"></div>

[Чёкатилло]

Анатолий: Привет Не я не понял правда )

[Чёкатилло]

Анатолий: какую то фишку предлагаешь а не пойму

[Анатолий]

Дмитрий: это норм. просто мне часто помогали в интернете, теперь когда я вижу вопрос на который могу ответить, стараюсь ответить подробно. Сразу непонятно, насколько включен в тему вопрошающий. В любом случае, что-то отложится, тут ничего запредельного.

Answer 2

[Nikita Shchypylov]

Pop-up

Comments

[Чёкатилло]

ну да, точно