Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

Question

Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

I'm utilizing the (deferLoad) method to load an image gallery in a more controlled manner. Is there any event available that can inform me about which items are currently visible?

The main goal is to load a set of data along with an image path, and then trigger the loading of the image when the item becomes visible.

Is there a way to determine which products are visible so that I can send their images to an API, either through an event or some other method?

Check out the Demo

.TS

<ul class="mdc-image-list my-image-list first">
    <li class="mdc-image-list__item" style="height:200px" *ngFor="let image of Images; let i = index"
        (deferLoad)="image.show = true">
        <ng-container *ngIf="image.show">
            <img [src]="image.url" style="height: 100%;width: 100%;">
            <div class="mdc-image-list-supporting"
                style="display: flex; align-items: center;flex-direction: column;padding: 2px">
                <span class="mdcImageListLabel">{{image.name}}</span>
            </div>
        </ng-container>
    </li>
</ul>

javascript angular typescript lazy-loading

Answer 1

Answer №1

If you're looking to implement lazy loading of images in Angular, the IntersectionObserver API can be a useful tool. One way to achieve this is by creating a directive specifically for handling lazy loading:

@Directive({
  selector: '[lazySrc]'
})
export class ImgDataDirective implements OnInit, OnChanges {
  @Input('lazySrc') src: string;

  constructor(
    private _elRef: ElementRef,
    private _renderer: Renderer2,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    this._loadImage();
  }

  ngOnInit(): void {
    this._renderer.setAttribute(this._elRef.nativeElement, 'src', PLACEHOLDER);

    if (isPlatformBrowser(this.platformId)) {
      const obs = new IntersectionObserver(entries => {
        entries.forEach(({ isIntersecting }) => {
          if (isIntersecting) {
            this._loadImage();
            obs.unobserve(this._elRef.nativeElement);
          }
        });
      });
      obs.observe(this._elRef.nativeElement);
    }
  }

  private _loadImage() {
    this._renderer.setAttribute(this._elRef.nativeElement, 'src', this.src);
  }
}

Answer 2

If you're looking to implement lazy loading of images in Angular, the IntersectionObserver API can be a useful tool. One way to achieve this is by creating a directive specifically for handling lazy loading:

@Directive({
  selector: '[lazySrc]'
})
export class ImgDataDirective implements OnInit, OnChanges {
  @Input('lazySrc') src: string;

  constructor(
    private _elRef: ElementRef,
    private _renderer: Renderer2,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    this._loadImage();
  }

  ngOnInit(): void {
    this._renderer.setAttribute(this._elRef.nativeElement, 'src', PLACEHOLDER);

    if (isPlatformBrowser(this.platformId)) {
      const obs = new IntersectionObserver(entries => {
        entries.forEach(({ isIntersecting }) => {
          if (isIntersecting) {
            this._loadImage();
            obs.unobserve(this._elRef.nativeElement);
          }
        });
      });
      obs.observe(this._elRef.nativeElement);
    }
  }

  private _loadImage() {
    this._renderer.setAttribute(this._elRef.nativeElement, 'src', this.src);
  }
}

Answer 3

Answer №2

To accomplish your goal of loading the images that are currently visible on the screen, you can include a specific attribute in the image tag.

<img loading=lazy>

For more information, you can refer to:

Take a look at a working example here: https://stackblitz.com/edit/angular-agkfuq?file=src/app/app.component.html

Answer 4

To accomplish your goal of loading the images that are currently visible on the screen, you can include a specific attribute in the image tag.

<img loading=lazy>

For more information, you can refer to:

Take a look at a working example here: https://stackblitz.com/edit/angular-agkfuq?file=src/app/app.component.html

Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

Answer №1

Answer №2

Similar questions

Inversify: class-based contextual dependency injection

What is the best way to check for duplicate email input when using knex?

Issues encountered with asp.net javascript function not executing

Angular 2 routing malfunctioning

The issue encountered with the Material UI Autocomplete component is that it is not displaying the values

Can JavaScript bypass the need for an html page and go directly to the printing process?

Struggling to make dynamically created SVG 'use' elements function properly

Executing a Playwright test against various projects or URLs within a single test run

Accessing the locally stored data and displaying it in ng-bind

Tips for combining Bootstrap 5's .is-invalid class with Angular's ng-invalid attribute

Leveraging Vuex stores in a modular WebPack setup

Unraveling the mystery: accessing the same variable name within a function in JavaScript

After downloading the latest version of NodeJS, why am I seeing this error when trying to create a new React app using npx?

Modify an element on one webpage using a function called from another webpage

In what way can you dynamically set the displayName using a higher order component?

Troubleshooting AngularJS application by Manipulating List Items

Why is it that useEffect is functioning correctly only on the first occasion?

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

How can you ensure that the Data Point Values are always displayed when using arrayToDataTable in the Google Charts API?

Angular 13: Problems arise with custom theme in Angular Material version 13