Determine if all resources on a page in Angular 4 have finished loading by keeping a loader spinning until everything is fully loaded

Question

Determine if all resources on a page in Angular 4 have finished loading by keeping a loader spinning until everything is fully loaded

As part of my work on an Angular app, I am developing a loader to enhance user experience.

While the typical approach involves utilizing a boolean parameter for subscribing to HTTP requests, in my case, the service's response consists of multiple image URLs since the page is heavily image-based.

However, I encountered an issue where the loader stops before all images finish loading due to slower network connections, causing frustration among users.

In an attempt to address this, I experimented with JavaScript's load event to monitor when all resources have completed loading and then stop the loader. Unfortunately, it seems I'm unable to modify the loader's status from within the listener function.

Below is a snippet of what I've tried:

// The TypeScript component 
isLoading: boolean;

ngOnInit() {
  this.isLoading = true;
  this.checkIfLoaded();
}

checkIfLoaded() {
  window.addEventListener("load", function (event) {
    console.log("All resources finished loading!");
    // At this point, I should take action like returning false or...
    // ...adjusting the isLoading value, but accessing isLoading here appears difficult.
  });
}


// The template
<ng-container *ngIf="isLoading">
  <app-spinner></app-spinner>
</ng-container>

Environment: Angular 4.4 Any assistance or insights on this matter would be greatly appreciated! Thank you.

javascript angular typescript

Answer 1

Answer №1

To ensure your component is ready after initialization, simply have it implement AfterViewInit interface and within the ngAfterViewInit() method, set isLoading to false.

class YourComponent implements AfterViewInit {
    // ...
    ngAfterViewInit() {
        this.isLoading = false;
    }
}

No need to add extra event handlers as Angular takes care of that through its lifecycle callbacks.

Answer 2

To ensure your component is ready after initialization, simply have it implement AfterViewInit interface and within the ngAfterViewInit() method, set isLoading to false.

class YourComponent implements AfterViewInit {
    // ...
    ngAfterViewInit() {
        this.isLoading = false;
    }
}

No need to add extra event handlers as Angular takes care of that through its lifecycle callbacks.

Answer 3

Answer №2

The main issue you're facing is that you are not correctly binding to the necessary events in your code.

If your goal is to determine whether the images have loaded or not, you must first create them and then wait for them to finish loading.

To address this problem, start by fetching your images, create corresponding HTML elements to load them, ensure all images have loaded successfully, and eventually showcase them on your page:

hasImagesLoaded: boolean[];

this.myService.getImages().subscribe((urls: string[]) => {
  // Initialize all image loading statuses as false
  this.hasImagesLoaded = urls.map(url => false);

  // Process each image individually
  urls.forEach((url, index) => {
    let img = new Image(); // Create a new HTML image element
    img.onload = () => {
      // Mark the current image as loaded
      this.hasImagesLoaded[index] = true;
      
      // Check if all images are now loaded to update loading status
      this.isLoading = !this.hasImagesLoaded.some(loadedStatus => !loadedStatus);
    };
    
    // Trigger the image loading process
    img.src = url;
  });
});

Once this process is complete, you can proceed with displaying your images using any preferred method.

Answer 4

The main issue you're facing is that you are not correctly binding to the necessary events in your code.

If your goal is to determine whether the images have loaded or not, you must first create them and then wait for them to finish loading.

To address this problem, start by fetching your images, create corresponding HTML elements to load them, ensure all images have loaded successfully, and eventually showcase them on your page:

hasImagesLoaded: boolean[];

this.myService.getImages().subscribe((urls: string[]) => {
  // Initialize all image loading statuses as false
  this.hasImagesLoaded = urls.map(url => false);

  // Process each image individually
  urls.forEach((url, index) => {
    let img = new Image(); // Create a new HTML image element
    img.onload = () => {
      // Mark the current image as loaded
      this.hasImagesLoaded[index] = true;
      
      // Check if all images are now loaded to update loading status
      this.isLoading = !this.hasImagesLoaded.some(loadedStatus => !loadedStatus);
    };
    
    // Trigger the image loading process
    img.src = url;
  });
});

Once this process is complete, you can proceed with displaying your images using any preferred method.

Answer 5

Answer №3

To stop the loading spinner, utilize the ngAfterViewInit lifecycle hook and update the isLoading variable to false within it.

TS

export class MyClass implements AfterViewInit {
  isLoading: boolean;

  constructor() {
    this.isLoading = true;
  }

  ngAfterViewInit() {
    this.isLoading = false;
  }
}

HTML

<app-spinner *ngIf="isLoading"></app-spinner>

Answer 6

To stop the loading spinner, utilize the ngAfterViewInit lifecycle hook and update the isLoading variable to false within it.

TS

export class MyClass implements AfterViewInit {
  isLoading: boolean;

  constructor() {
    this.isLoading = true;
  }

  ngAfterViewInit() {
    this.isLoading = false;
  }
}

HTML

<app-spinner *ngIf="isLoading"></app-spinner>

Determine if all resources on a page in Angular 4 have finished loading by keeping a loader spinning until everything is fully loaded

Answer №1

Answer №2

Answer №3

Similar questions

What are the steps to executing a function that instantiates an object?

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

Is it possible to attach a mouse click event to styled text?

Update the list upon creation of an item

Creating a dynamic image gallery with varying image dimensions using JavaScript and Bootstrap

What is the proper way to utilize environment variables on Heroku for my Angular application?

Sanitize input data prior to using express-validator in a Node.js application

How can I ensure that Redux-saga waits for API calls to resolve instead of returning promises continuously? Is there a way to make "yield call" wait for API calls to complete?

What are the steps for adding node packages to sublime text?

Showing fixed values inside directive view after successful injection

Activate Jquery to display the submenu when clicked and conceal any other open submenus at the same time

Leveraging JavaScript within a Polymer component

Using JavaScript, generate table rows and cells

Using Promise.all for multiple function calls

I encounter an error in my JavaScript function indicating that it is not defined

Angular HTML Component Refactor causes compatibility issues with BS4 classes

"Exploring the power of Node.js by utilizing ObjectArray and implementing

I was anticipating only one request, but unexpectedly uncovered two requests. Now I need to figure out how to test for multiple requests

JavaScript functions triggered upon page reload or refresh

The NextJS API route functions flawlessly when tested locally, generating over 200 records. However, upon deployment to Vercel, the functionality seems to