Loading images from Contentful in Angular 8 using Resolve before rendering them on the view

Question

Loading images from Contentful in Angular 8 using Resolve before rendering them on the view

I am currently facing a challenge that I need help with:

https://i.sstatic.net/ytLoj.gif

The issue I am encountering is that when the page loads, the view renders before the images fully load. Is there a way to ensure that the view only renders once the images have completely loaded? It's worth mentioning that the images are hosted on a different domain, specifically on Contentful.

I've been exploring the Resolve API as a solution, but I'm struggling with implementing it since I'm not making an HTTP request.

Below is my attempt at creating a resolve service:

export class GalleryImagesResolverService implements Resolve<any> {
  
  constructor(
    private contentfulService: ContentfulService
  ) { }

  resolve(route: ActivatedRouteSnapshot) {
    return this.contentfulService.getGalleryImages();
  }
}

Here's the contentful service code snippet:

//get Gallery Images
getGalleryImages(query?: object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
// include : 2,
content_type: CONFIG.contentTypeIds.gallery
}, query))
.then(res => res.items);
}

Any advice or suggestions would be greatly appreciated! If you have a better approach in mind, please share your insights. :)

javascript angular typescript

Answer 1

Answer №1

As mentioned by "Sangwin Gawande," the (load) eventListener in HTML can help achieve this functionality.

To simplify this process, I have created a helpful component to handle loading of images:

Child Component

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

@Component({
  selector: 'img-with-loader',
  template: `

    <div *ngIf="loading">
      LOADING CONTENT GOES HERE
    </div>
    <img
      [hidden]="loading"
      [src]="imgSrc"
      (load)="loading = false"
    />
  `
})
export class ImgWithLoaderComponent {
  @Input()
  imgSrc: string;

  loading = true;
}

Parent Component

Replace the regular <img> element with the following code to prevent displaying the image until it finishes loading:

<!-- background won't show until the image is finished loading -->
<img-with-loader [src]="backgroundUrl"></img-with-loader>

Answer 2

As mentioned by "Sangwin Gawande," the (load) eventListener in HTML can help achieve this functionality.

To simplify this process, I have created a helpful component to handle loading of images:

Child Component

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

@Component({
  selector: 'img-with-loader',
  template: `

    <div *ngIf="loading">
      LOADING CONTENT GOES HERE
    </div>
    <img
      [hidden]="loading"
      [src]="imgSrc"
      (load)="loading = false"
    />
  `
})
export class ImgWithLoaderComponent {
  @Input()
  imgSrc: string;

  loading = true;
}

Parent Component

Replace the regular <img> element with the following code to prevent displaying the image until it finishes loading:

<!-- background won't show until the image is finished loading -->
<img-with-loader [src]="backgroundUrl"></img-with-loader>

Loading images from Contentful in Angular 8 using Resolve before rendering them on the view

Answer №1

Similar questions

Angular2 with Bootstrap Grid integration is a powerful combination for building

How can I send a value from a for loop to a URL within a modal using Django?

The 'fetch' operation could not be completed on the current window due to a TypeError

Waiting to submit a Vue form until a field is filled out

Guide to automatically send a message when a new channel is added to a designated category using discord.js

What is the best way to extract information from a table that has been populated by a backend function?

Having trouble passing variables via URL when using PHP and AJAX

Show items in a row inside a div

Avoid allowing users to copy text by dragging and dropping it from the browser

Solutions for accessing data variables outside of a Vue file

The issue with ag-grid not displaying data when the column configurations are changed dynamically

creating a post action using Node.js with Express and Angular

Encountered a JSON.Parse error in Angular 9's HttpErrorResponse even though the response was successful

When dealing with a react input field, the term " synthetic" keeps popping up after every attempt to save changes. Additionally, using "value" instead of "defaultValue"

Creating a curved edge for a shape in React Native can add a stylish and

Move the creation of the HTML string to an HTML template file within ngx bootstrap popover

Error message: Icons failing to display in conjunction with template output | 404 error code

Leverage the power of Node.js by utilizing http.get along with

Utilizing props for toggling the navigation list, incorporating nested arrays or objects

Issue Encountered in NodeJS While Processing Multiple GET Requests