Question

我正在向个人API发出请求，该API返回大约（约） 300 张图片的网址，所有这些图片我都必须在轮播中显示。

问题是我的页面加载时间很长，因为附加费开始加载300张图像。轮播每次显示6张图片，而我想要的是让您加载图片，同时单击“下一页”或“ PREV”按钮以加快页面加载速度。那是正确的方法，对吗？

我从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”按钮时，它们会逐个显示以下内容：

在这里您可以看到我想要避免的事情，因为它们正在加载一堆我不需要显示的图像，直到我将它们放入轮播中，因为它们太多了：

如何避免这种情况？

我将非常感谢能够帮助我解决这个问题的人。预先感谢。

Answer 1

这是一个好问题。首先，我们将有2个数组

一个masterArray，其中包含图像的所有URL；
一个imagesArray，该数组将与轮播进行数组链接，开头只有1张图片...这意味着在页面加载时，我们仅加载了一张图片。
我们只需在每个幻灯片更改事件[事件的名称是：masterArray]中将imagesArray的网址添加到activeSlideChange中；

相关的 HTML （单张幻灯片轮播）：

<carousel (activeSlideChange)='gotChange()'>
  <slide *ngFor="let img of imagesArray; let idx of index"  >
    <img src="{{img}}" alt="slide {{idx}}" style="display: block; width: 100%;">
  </slide>
</carousel>

相关的 TS （单幻灯片轮播）：

import { Component, ViewChild } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(CarouselComponent) myCarousel: CarouselComponent;
  name = 'Angular';
  masterArray = ['https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/4.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/5.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/6.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/7.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/8.jpg',
  ];
  imagesArray = ['https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'];
  loopcomplete: boolean = false;

  constructor() { }

  gotChange() {
    console.log('got change', this.myCarousel.activeSlide);
    if (!this.loopcomplete) {
      if (this.myCarousel.activeSlide + 1 < this.masterArray.length) {
        this.imagesArray.push(this.masterArray[this.myCarousel.activeSlide + 1]);
      } else { this.loopcomplete = true; }
    }
  }

}

完成working stackblitz here

该图像显示图像的延迟加载

更新：鉴于以下提问者的评论，我们正在寻找的事件是slideRangeChange

相关的 HTML （多幻灯片轮播）：

<carousel [itemsPerSlide]="itemsPerSlide"
          [singleSlideOffset]="singleSlideOffset"
          [noWrap]="noWrap"
          (activeSlideChange)='gotChange()'
          (slideRangeChange)='gotRangeChange()'
          [showIndicators]='false'
          [interval]='false'
           >
  <slide *ngFor="let img of imagesArray; let idx of index"  >
    <img [src]="img" alt="slide {{idx}}" style="display: block; width: 100%;">
  </slide>
</carousel>

相关的 TS （多幻灯片轮播）：

import { Component, ViewChild } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(CarouselComponent) myCarousel: CarouselComponent;
  name = 'Angular';
  masterArray = ['https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/4.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/5.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/6.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/7.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/8.jpg',
  ];
  imagesArray = ['https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg',
    'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg',
  ];
  loopcomplete: boolean = false;
  itemsPerSlide = 2;
  singleSlideOffset = true;
  noWrap = true;
  activeRange = 0;

  constructor() { }

  gotRangeChange() {
    if (!this.loopcomplete) {

      if (this.activeRange + 2 < this.masterArray.length) {
        this.activeRange = this.activeRange + 2;
        this.imagesArray = this.imagesArray.concat(this.masterArray[this.activeRange]);
        this.imagesArray = this.imagesArray.concat(this.masterArray[this.activeRange + 1]);
      } else {
        this.loopcomplete = true;
      }
    }

  }
}

完成working stackblitz (multi slide carousel)

Angular：如何根据需要请求图像以加快加载速度（使用ngx-bootstrap）

1 个答案: