Я делаю запрос к персональному API, который возвращает URL примерно 300 изображений (приблизительно) и все эти изображения, которые я должен показать их в карусели.
Проблема в том, что моя страница долго загружается, потому что, когда за дополнительную плату начинает загружаться 300 изображений. Карусель показывает 6 изображений за проход, и я хочу, чтобы вы загружали изображения, нажимая кнопку «СЛЕДУЮЩАЯ» или «ПРЕДЫДУЩАЯ», чтобы ускорить загрузку страницы. Это был бы правильный способ сделать это, верно?
Я начинаю с angular, и я впервые делаю заявление такого типа. Кто-нибудь может мне помочь? Я исследовал, но я не нашел много информации, которая помогает мне, или я не знаю терминологию того, что мне нужно использовать в этом случае.
Это код карусели , где я показываю комментируемые изображения, я использую NGX-BOOTSTRAP:
<div class="container" >
<div class="d-flex justify-content-center align-items-center">
<div class="d-flex align-items-center justify-content-center">
<div> <span class="text-hot">
<b>HOT</b> </span> </div>
</div>
<div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center">
<div class="text-hot align-middle">
list
</div>
</div>
</div>
</div>
<!-- Imagen de Pre-Carga-->
<div class="container-fluid d-flex justify-content-center" id="cont-preCarga" *ngIf="preCarga">
<img src="../../assets/images/slider/spinner.gif">
</div>
<app-modal [inmueble]="this.inmueble2" class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
<carousel [itemsPerSlide]="itemsPerSlide"
[singleSlideOffset]="singleSlideOffset"
[interval]="false"
[noWrap]="noWrap">
<slide class="col-md-2" *ngFor="let imagenPortada of this.hostlistService.inmuebles; let index=index" style="width: 500px;">
<img src="{{url}}{{imagenPortada.id}}_{{imagenPortada.fotos[0]}}" alt="imagen de slide" style="display: block; width: 100%; height: 300px;"> <!-- <-----HERE IS WHERE I AM SHOWING THE IMAGES -->
<!--<img src="../../assets/images/slider/logo.png" alt="imagen de slide" style="z-index: 10; width: 100%; height: 300px; position: absolute; left: 0; top:0;">-->
<!-- <div class="carousel-caption">
<h4>Slide {{index}}</h4>
</div> -->
<div class="row">
<div class="col-12">
<p class="text-left text-precio"> <i class="fas fa-dollar-sign">
</i> Precio: {{imagenPortada.precio | currency: 'USD':true:'1.2-2'}}
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="text-left"> <i class="fas fa-map-marker-alt"></i> Ubicacion: {{imagenPortada.precio | currency: 'USD':true:'1.2-2'}}
</p>
</div>
</div>
<div class="row">
<div class="d-flex col-12">
<div class="cont-verDetalles d-flex justify-content-center">
<button (click)="obtenerInfo(imagenPortada)" type="button" class="mt-2 btn btn-secondary" data-toggle="modal" data-target="#exampleModal2">Ver detalles</button>
</div>
</div>
</div>
</slide>
</carousel>
Это изображение карусели , где я показываю только 6 изображений, когда я нажимаю кнопку «NEXT» или «PREV», они запускаются одно за другим, чтобы показать следующее:
И здесь вы можете увидеть, чего я хочу избежать, - они загружают стопку изображений, которые мне не нужно показывать, пока они мне не понадобятся в карусели, поскольку их слишком много:
Как я мог сделать, чтобы избежать этого?
Я был бы очень признателен человеку, который может помочь мне с этим. Заранее спасибо.