Làm cách nào để lười tải hình ảnh trong Angular?

Question

Trình duyệt bạn đang nhắm mục tiêu cần có hỗ trợ của

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

6 và

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

7. Nếu bạn cần hỗ trợ một trình duyệt cũ hơn (như IE), bạn sẽ cần thêm polyfill cho

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

6 và

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

7 (xem https. //github. com/zloirock/core-js chẳng hạn)

Cũng đảm bảo bao gồm một polyfill cho Trình quan sát giao lộ nếu bạn cần nhắm mục tiêu IE và muốn sử dụng IntersectionObserver. https. //github. com/w3c/IntersectionObserver/tree/master/polyfill

⬇️Cài đặt

Để cài đặt gói, chỉ cần chạy

$ npm install ng-lazyload-image

hoặc như sau nếu bạn đang sử dụng sợi

$ yarn add ng-lazyload-image

🛠Thiết lập

Bao gồm thư viện trong mô-đun của bạn (xem ứng dụng. mô-đun. ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

Giao lộNgười quan sát

Theo mặc định,

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

0 đang sử dụng trình quan sát giao lộ, vì vậy bạn không cần phải làm gì nếu muốn tiếp tục sử dụng trình quan sát giao lộ làm bộ phát sự kiện

Trình nghe cuộn

Bạn có thể dễ dàng chuyển từ Trình quan sát giao lộ sang trình nghe cuộn bằng cách sử dụng ________ 71

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

Xem bên dưới để biết thêm thông tin

🖼Công dụng

Một trường hợp sử dụng đơn giản là sử dụng thẻ

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

2 và đưa hình ảnh đó vào lazyload cho

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

3 và một hình ảnh mặc định tùy chọn cho

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

4. Hình ảnh mặc định sẽ được hiển thị trong khi hình ảnh "thực" đang được tải

Ví dụ

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

Hinh nên

Nó cũng hỗ trợ hình nền

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

4

Hình ảnh đáp ứng

Nếu sử dụng hình ảnh phản hồi trong thẻ

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

5 đơn giản, bạn sẽ cần đặt thuộc tính

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

6 thành

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

8

Nếu sử dụng hình ảnh phản hồi trong thẻ

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

8, hãy đặt thẻ

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

5 mặc định như bình thường với

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

40, v.v. thuộc tính.
Bạn có thể sử dụng các thuộc tính

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

41,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

42 và

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

43 cho các phần tử

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

44.
Không cần đặt

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

6 cho các phần tử

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

44, vì

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

47 được sử dụng theo mặc định.
Ví dụ đơn giản cho thẻ

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

8.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

0

Đang tải đường dẫn hình ảnh không đồng bộ

Bạn có thể tải hình ảnh không đồng bộ hoặc thay đổi url một cách nhanh chóng, ví dụ:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

1

Có thể quan sát tùy chỉnh

Đôi khi bạn muốn kiểm soát nhiều hơn khi nào chúng ta nên kiểm tra xem hình ảnh có ở chế độ xem không.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

49 hãy để bạn tạo ra thiết bị quan sát của riêng mình

Điều này sẽ thay đổi chức năng khi chúng tôi kiểm tra xem hình ảnh có trong chế độ xem hay không. Nó không thay đổi chức năng về cách phát hiện xem một hình ảnh có trong chế độ xem hay không. Nghĩa. nếu bạn đang sử dụng IntersectionObserver (mặc định), điều quan trọng là trình quan sát mà bạn chuyển đến

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

49 sẽ phát ra các đối tượng giống như.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

81. Bạn có thể thay đổi hành vi này bằng cách triển khai

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

82 của riêng mình (xem bên dưới để biết thêm thông tin)

Nếu bạn đang sử dụng cài sẵn ScrollHooks, bạn chỉ cần vượt qua

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

49 và quá trình đặt lại sẽ tự động được xử lý

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

7

$ yarn add ng-lazyload-image

0

ion

Nếu bạn đang sử dụng Ionic và không muốn sử dụng IntersectionObserver, bạn có thể cần thêm cuộn có thể quan sát của riêng mình hoặc thay đổi mục tiêu cuộn. Chẳng hạn, nếu bạn muốn có nhiều mục tiêu cuộn

$ yarn add ng-lazyload-image

1

Trong trường hợp sử dụng ion-slide trong Ionic 2+, bạn có thể bao gồm cuộn của riêng mình có thể quan sát được như bên dưới

$ yarn add ng-lazyload-image

2

🐛Gỡ lỗi

Để hiểu rõ hơn về những gì đang xảy ra, bạn có thể vượt qua

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

84 sẽ xuất ra một số thông tin gỡ lỗi trong bảng điều khiển web

Xem để biết thêm thông tin về các thông báo đầu ra khác nhau

💅CSS

Tên lớp css

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

85 sẽ tự động được thêm vào trước khi hình ảnh được tải và sẽ bị xóa khi hình ảnh đã được tải hoặc nếu hình ảnh không thể tải được

Tên lớp css

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

86 sẽ được thêm vào khi hình ảnh được tải (bất kể hình ảnh có thể được tải hay không)

Tên lớp css

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

87 sẽ được thêm vào khi không thể tải hình ảnh

🔄API

lười tải

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

88

Ví dụ.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

89

Hình ảnh được tải chậm. Hình ảnh này sẽ thay thế hình ảnh mặc định (

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

00)

$ yarn add ng-lazyload-image

3

defaultImage (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

88

Ví dụ.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

02

Đường dẫn đến hình ảnh mặc định. Hình ảnh này sẽ được tải ngay lập tức

Bạn cũng có thể sử dụng thuộc tính

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

03 cho thẻ img để xác định hình ảnh mặc định.
______304

hoặc

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

05 cho các thẻ không phải hình ảnh.
______306

errorImage (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

88

Ví dụ.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

08

Một hình ảnh sẽ được tải nếu không tải được

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

40. Sẽ tải hình ảnh mặc định (

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

00) nếu không có

$ yarn add ng-lazyload-image

4

bù đắp (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

11

Ví dụ.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

12

Mặc định.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

13

Số px một hình ảnh phải được tải trước khi nó ở trong cổng xem

$ yarn add ng-lazyload-image

5

scrollTarget (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

14

Ví dụ.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

15

Mặc định.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

16

Bạn sẽ cần đặt thuộc tính này nếu bạn đang sử dụng vùng chứa cuộn và không truyền sự kiện cuộn tới cửa sổ

customObservable (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

17

Ví dụ.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

18

Bạn có thể vượt qua khả năng quan sát của riêng mình nếu bạn cần kiểm soát nhiều hơn đối với luồng. Có thể hữu ích nếu tích hợp với các khung khác như ion. Xem để biết thêm thông tin

sử dụngSrcset (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

19

Ví dụ.

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7

Bạn có thể đặt giá trị này thành

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7 nếu bạn cần lười tải hình ảnh với thuộc tính

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

47, thay vì

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

03.
_______144 thẻ được thiết lập để sử dụng

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

47 theo mặc định, vì vậy bạn không cần phải thiết lập thêm tùy chọn này.

giải mã (tùy chọn)

Loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

19

Ví dụ.

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7

Bạn có thể đặt giá trị này là

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7, hình ảnh sẽ được giải mã trước khi đưa vào DOM. Điều này có thể hữu ích cho hình ảnh lớn

gỡ lỗi (tùy chọn)

loại.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

19

Ví dụ.

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7

Xem để biết thêm thông tin

Sự kiện

onStateChange (tùy chọn)

Loại.

$ yarn add ng-lazyload-image

01

Ví dụ.

$ yarn add ng-lazyload-image

02

Bạn có thể truyền chức năng gọi lại, chức năng này sẽ được gọi khi hình ảnh chuyển sang trạng thái khác

$ yarn add ng-lazyload-image

6

🎣Móc

Có thể nối vào quá trình tải bằng cách tạo các chức năng của riêng bạn

Ví dụ: giả sử bạn muốn tìm nạp một hình ảnh với một số tiêu đề tùy chỉnh. Nếu vậy, bạn có thể tạo một móc tùy chỉnh để tìm nạp hình ảnh

$ yarn add ng-lazyload-image

7

Bạn thậm chí có thể sử dụng các dịch vụ khác bằng cách tiêm chúng. Giả sử bạn muốn sử dụng lớp https của Angulars thay vì

$ yarn add ng-lazyload-image

03

$ yarn add ng-lazyload-image

8

Các móc sau được hỗ trợ

getObservable

Nên trả về một observable phát ra một giá trị mới mỗi lần

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

0 nên kiểm tra xem hình ảnh có ở chế độ xem không. Điều quan trọng là sự kiện phát ra phải cùng loại ________ 182 mong đợi

Ví dụ

$ yarn add ng-lazyload-image

9

Một ví dụ hữu ích hơn có thể là thêm thời gian gỡ lỗi để chúng tôi chỉ bắt đầu tải hình ảnh nếu nó đã ở trong cổng xem một thời gian

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

0

Xem người nghe giao lộ. chẳng hạn

Xem

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

82 nếu bạn muốn sử dụng sự kiện của riêng mình

có thể nhìn thấy

Chức năng kiểm tra xem phần tử có hiển thị không

Ví dụ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

1

Nếu bạn muốn tạo sự kiện của riêng mình, bạn có thể tạo cả

$ yarn add ng-lazyload-image

07 và

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

82 bằng cách mở rộng

$ yarn add ng-lazyload-image

09

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

2

tải hình ảnh

Chức năng tải hình ảnh. Nó phải trả về một đường dẫn đến hình ảnh (tuy nhiên, nó có thể không đồng bộ, như ví dụ bên dưới và/hoặc trả về một giá trị có thể quan sát được)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

3

Nếu bạn không muốn tải hình ảnh mà thay vào đó để trình duyệt tải hình ảnh đó cho bạn, thì bạn chỉ cần trả lại imagePath (Tuy nhiên, chúng tôi sẽ không biết liệu hình ảnh có thể không tải được hay không và hình ảnh lỗi sẽ không được sử dụng)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

4

setLoadedImage

Một chức năng để đặt url hình ảnh thành DOM

Ví dụ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

5

setErrorImage

Chức năng này sẽ được gọi nếu hình ảnh lười biếng không thể tải được

Ví dụ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

6

cài đặt

Hàm này sẽ được gọi khi thiết lập. Có thể hữu ích cho việc (tái) thiết lập các lớp css và đặt hình ảnh mặc định

Hàm này sẽ được gọi mỗi khi thuộc tính thay đổi

Ví dụ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

7

cuối cùng

Chức năng này sẽ được gọi khi xé. Có thể hữu ích để thiết lập các lớp css

Ví dụ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

8

isBot

Chức năng kiểm tra xem người dùng hiện tại có phải là bot hay không. Có thể hữu ích cho SSR và SEO

chức năng mặc định

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

9

Cả

$ yarn add ng-lazyload-image

10 và

$ yarn add ng-lazyload-image

11 sẽ tải hình ảnh ngay khi có thể nếu

$ yarn add ng-lazyload-image

12 trả về

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

7

bị vô hiệu hóa

Một chức năng để quyết định xem có nên tắt mô-đun hay không, nghĩa là. không phải làm gì hết, thoát ra ngay, không cần load ảnh. Hành vi mặc định là tắt nó trên máy chủ nếu người dùng không phải là bot

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

0

bỏ quaLazyLoading

Một chức năng để quyết định xem chúng ta có nên tải hình ảnh ngay không. Điều này có thể hữu ích nếu bạn muốn chuyển sang lazyload hình ảnh khi SSR

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

1

Hoặc có thể bạn muốn tải hình ảnh càng sớm càng tốt từ các miền cụ thể

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

2

Hành vi mặc định cho

$ yarn add ng-lazyload-image

14 là gọi

$ yarn add ng-lazyload-image

12. Nghĩa. nếu user là bot thì load ảnh ngay, ngược lại thì lazyload ảnh

onAttributeChange

Hàm này được gọi khi một số thuộc tính của hình ảnh bị thay đổi

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

3

onDestroy

Hàm này được gọi khi hình ảnh được tải và lệnh sẽ ngắt kết nối, hay còn gọi là. khi

$ yarn add ng-lazyload-image

16 được gọi trong chỉ thị. Điều này có thể hữu ích nếu bạn muốn dọn dẹp

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

4

🔎Tối ưu hóa công cụ tìm kiếm (SEO)

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `  `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

0 đang sử dụng chiến lược sau theo mặc định

Kết xuất phía máy chủ (SSR)

Nếu yêu cầu đến từ bot; . Hữu ích nếu bot không hiểu javascript

Nếu yêu cầu không phải từ bot (hoặc nếu chúng tôi không thể quyết định), đừng làm gì cả và để khách hàng sửa ảnh (xem bên dưới)

Bạn có thể thay đổi hành vi này bằng cách triển khai hàm

$ yarn add ng-lazyload-image

14 của riêng mình (xem

$ yarn add ng-lazyload-image

14 ở trên). Giả sử bạn luôn muốn hiển thị hình ảnh càng sớm càng tốt cho SSR, bất kể người dùng có phải là bot hay không

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

5

Phía khách hàng

Nếu người dùng là bot (xem móc nối
```
$ yarn add ng-lazyload-image
```
12 ở trên), hãy hiển thị tất cả các hình ảnh ngay lập tức. (hữu ích nếu bot hiểu javascript)
Nếu người dùng không phải là bot (hoặc nếu chúng tôi không thể quyết định), hãy tải hình ảnh một cách lười biếng

🤔Hỏi đáp

Q Làm cách nào tôi có thể kích hoạt tải hình ảnh theo cách thủ công?

A Bạn có thể sử dụng hook

$ yarn add ng-lazyload-image

07 nếu bạn có thể kích hoạt tải bên ngoài dom hoặc bạn có thể sử dụng đầu vào

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks
  bootstrap: [AppComponent],
})
export class MyAppModule {}

49, xem

Q Thư viện này có hoạt động với ion hoặc một số trình bao bọc khác cho Angular không?

A Có, nhưng ion và một số thư viện khác bao bọc toàn bộ tài liệu bên trong một div khác, do đó bạn có thể cần tạo trình nghe cuộn của riêng mình

Làm thế nào chúng ta có thể lười tải hình ảnh?

Kỹ thuật tải chậm cho hình ảnh. Hình ảnh trên trang web có thể được tải theo hai cách - sử dụng thẻ . Trước tiên chúng ta hãy xem cái phổ biến hơn của cả hai, thẻ

Làm cách nào để tải hình ảnh nhanh hơn trên Angular?

Làm theo các bước dưới đây để tăng tốc độ tải hình ảnh trong các ứng dụng Angular. .

Bước 1. Nhập chỉ thị NgOptimizedImage trong AppModule. .

Bước 2. Thay thế thuộc tính src của hình ảnh bằng rawSrc. .

Bước 3. Đặt thuộc tính chiều rộng và chiều cao. .

Bước 4. Định cấu hình trình tải CDN hình ảnh. .

Bước 5. Url hình ảnh kết nối trước

Bạn có nên lười tải hình ảnh trong màn hình đầu tiên không?

Mọi thứ nằm trong màn hình đầu tiên không được tải chậm . Những tài nguyên như vậy nên được coi là tài sản quan trọng và do đó nên được tải bình thường. Lazy loading trì hoãn việc tải tài nguyên cho đến sau khi DOM tương tác khi các tập lệnh tải xong và bắt đầu thực thi.

Làm thế nào chúng ta có thể thêm hình ảnh trong Angular?

Tải lên hình ảnh đơn giản mà bạn cần để tạo ứng dụng bằng lệnh " ng new my-app". Bạn phải mở thành phần HTML của mình, sau đó sử dụng thẻ hình ảnh và đặt hình ảnh với tên hoặc đường dẫn thích hợp của chúng, chẳng hạn như.

programming

Làm cách nào để lười tải hình ảnh trong Angular?

⬇️Cài đặt

🛠Thiết lập

Giao lộNgười quan sát

Trình nghe cuộn

🖼Công dụng

Hinh nên

Hình ảnh đáp ứng

Đang tải đường dẫn hình ảnh không đồng bộ

Có thể quan sát tùy chỉnh

ion

🐛Gỡ lỗi

💅CSS

🔄API

lười tải

defaultImage (tùy chọn)

errorImage (tùy chọn)

bù đắp (tùy chọn)

scrollTarget (tùy chọn)

customObservable (tùy chọn)

sử dụngSrcset (tùy chọn)

giải mã (tùy chọn)

gỡ lỗi (tùy chọn)

Sự kiện

onStateChange (tùy chọn)

🎣Móc

getObservable

có thể nhìn thấy

tải hình ảnh

setLoadedImage

setErrorImage

cài đặt

cuối cùng

isBot

bị vô hiệu hóa

bỏ quaLazyLoading

onAttributeChange

onDestroy

🔎Tối ưu hóa công cụ tìm kiếm (SEO)

Kết xuất phía máy chủ (SSR)

Phía khách hàng

🤔Hỏi đáp

Làm thế nào chúng ta có thể lười tải hình ảnh?

Làm cách nào để tải hình ảnh nhanh hơn trên Angular?

Bạn có nên lười tải hình ảnh trong màn hình đầu tiên không?

Làm thế nào chúng ta có thể thêm hình ảnh trong Angular?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội