Я использую Angular 8 для веб-приложения на основе блога. Данные пока хранятся в файле json, даже изображения загружаются вместе с путем.
JSON-данные
[
{
"imgSrc": "./assets/images/dalai-hills-1.jpg",
"destination": "Dalai Hills",
"introTitle": "through happy valley, to a picturesque place",
"place": "mussoorie, uttarakhand",
"description": "Lorem ipsum dolor sit amet, no elitr tation delicata cum, mei in causae deseruisse.",
}
]
imgSrc решает, какое изображение загрузить. Все изображения уже оптимизированы и находятся в папке с ресурсами.
Шаблон
<article class="blog-card" style="border-top: 0;" *ngFor="let blog of blogsList">
<div class="blog-img-wrap" style="min-height: 200px;">
<a href="#"">
<img loading="lazy" class="img-fluid blog-img" src="{{ blog.imgSrc }}" alt="blog-image-1">
</a>
</div>
</article>
Скажем, на странице блогов при загрузке загружается 12 изображений из-за , я хочу, чтобы страница загружалась только после загрузки всех изображений.
Я не получаю конкретного ответа на stackoverflow. В настоящее время существует очень небольшая разница в доли секунд между загрузкой текста и изображений, но это выглядит странно.
Любые решения на том же самом?
P.S: я хочу избежать jQuery.