Я делаю запрос на адрес return
которой возвращает сгенерированный html.
код запросa выглядит так:
document.addEventListener("DOMContentLoaded", function() {
axios.get("/get-cards")
.then(response => {
document.getElementById("load").remove();
$("#content").html(response.data);
})
.catch(error => {
console.log(`ERROR: ${error}`);
});
});
страница которая генерирует html (по адресу /get-cards) выглядит так:
@foreach($technics as $technic)
<div class="technic-card">
<div class="card-img">
<div style="background-image: url('{{ $technic->img_1 }}'" alt="{{ $technic->name }}">
<div style="background-image: url('{{ $technic->img_2 }}'" alt="{{ $technic->name }}">
<div style="background-image: url('{{ $technic->img_3 }}'" alt="{{ $technic->name }}">
</div>
<div class="card-name">{{ $technic->name }}</div>
<div class="card-type">{{ $technic->type }}</div>
<div class="card-footer">
<div class="card-price">{{ $technic->price }}/час</div>
<div class="card-buy-btn">арендовать</div>
</div>
</div>
@endforeach
мне нужно чтобы на страницу добавлялся уже готовый html с загруженными картинками, но происходит следующий сценарий.
- загружается страница с которой отправляется запрос и на которую потом ответ (html разметка) и добавляется
- включается индикатор загрузки
- запрос возвращает ответ
- индикатор загрузки убирается
- добавляется html код на страницу
- и начинаются грузиться картинки выглядит это так
Как сделать так чтобы индикатор загрузки не исчезал до тех пор пока не загрузятся картинки тоже?