What is eager loading?

Question

There are three levels:

1. Eager loading: you do everything when asked. Classic example is when you multiply two matrices. You do all the calculations. That's eager loading;
2. Lazy loading: you only do a calculation when required. In the previous example, you don't do any calculations until you access an element of the result matrix; and
3. Over-eager loading: this is where you try and anticipate what the user will ask for and preload it.

I hope that makes sense in the context you're seeing it.

Let me give you a "Webby" example.

Imagine a page with rollover images like for menu items or navigation. There are three ways the image loading could work on this page:

1. Load every single image required before you render the page (eager);
2. Load only the displayed images on page load and load the others if/when they are required (lazy); and
3. Load only the displayed images on page load. After the page has loaded preload the other images in the background in case you need them (over-eager).

Make sense?

It's the opposite of lazy loading, which defers initialization of an object until the object is needed. Eager loading initializes an object upon creation.

If you imagine you have object called person who has a name, a date of birth and number of less critical details, lets say favourite colour, favourite tv program.

To lazy load this class you would initalise it reading in perhaps from a database all the core more frequently used details (say name and date of birth) and only read in the less used details when / if they are needed, eager loading is the opposite, i.e. you load in all the details at the same time.

The benifits of lazy loading are often citied as effiecency, however if objects aren't that complex or efficency isn't a concern eager loading may be used

Eager loading is also used in Angular 8. It just means that the instant the application is loaded inside the browser we automatically, instantly get all the code inside a particular module, for example, say you just created an Auth Module with a Signin and Signup component to it that gets imported into an App Module.

In contrast, there is lazy loading, which is when we tell the App Module which has the Auth Module loaded into it, to only load the Auth Module at a certain point in time such as when a user goes to a certain route.