What's the objectif of lazy loading

Ionic Framework ionic-v3
1

I heared about lazy loading but I dont know what does lazy loading really do? Why do we need lazy loading in our apps?

2

Hi,

The main goal of lazy loading is to make your app faster, it is related with images that are quite heavy (jpgs, pngs so on). To explain in short, normally you load a webpage with all images inside it, and the page is shown only when all images are downloaded. This can be super slow if you load for example 500 products on the same smartphone product page with infinite loop.
The goal of lazy loading is to load every images as you go down in the list, it could be described as “load on the go” like “pay as you go”.

This often results in very nice gain performance boosts, in terms of page speed load.

Hope I’m clear enough,

1 Like
3

Thank you it’s clear. Is it always good to use lazy loading in your app?
another question, when you use lazy loading, is it applicable on all the app or just for some specific pages?

4

Lazy loading is a javascript concept, like TypeScript, so you can action it in all pages or just specific pages, like i said it’s a concept, that can be applied to anything.

For example, out of ionic, i will do it in an ecommerce store soon based on magento.

EDIT : but the implementation is not so easy to make, because you have to create preloader classes, and interrupt the flow of ionic or magento for example, to make it work.

EDIT 2 : But if you load only like 15 products or articles per page, it’s not super useful. Lazy loading will be useful when people can browse more than 100s of records or products per page, with image loaded for each one. OR infinite loop, like in some apps you can go down infinitely (eg Asos), then Lazy Loading is super helpful.

Hope it helps,

1 Like
5

Yes verry helpful. Now i undestand what is it. I will just need to find some good posts to understand this concept very well. do you know any good post about javascript concept?

6

Well @boussarhane it depends your level in coding in general. Are you familiar with php or mysql? What languages do you practice? It will help me tell you what to look (i’m an occasional teacher in digital).

1 Like
7

Ooh that’s great. Yeah im familiar with php and mysql

8

ok then, lazy loading heavily uses Jquery in most libraries, it’s plugged by php or Typescript for ionic, to Jquery or custom made old school javacript if you know.

Some tutorials that are very nice :slight_smile:

I suspect you speak french so this one for php:
http://www.informatix.fr/articles/php/le-lazy-load-en-php-143

That should be a good start,

Hope that helps,

François

1 Like
9

Many example i gave use magento sorry, but it’s not a big deal to translate into TS.

1 Like
10

u r such a nice helper :wink: I wish u all the best ( sorry for my english, it’s my third language)

11

no problem @boussarhane, many people helped me here, when i started to learn ionic :slight_smile:

have fun with ionic :slight_smile:

françois

12

Thank you verry much François.

1 Like
13

Goal of lazy loading:

Speed up boot time/start up of your app (“open the app faster when users start it”)

Summarized:

  • No lazy loading = All you app, everything, is loaded when you boot/start your app

  • Lazy loading = Only what you need for the core and first page is loaded when you boot/start your app. Then when you browse the next pages, each time you go to a new page, only then what’s needed for the page and the page itself gonna be loaded

Ionic and lazy loading tutorial and explanation:

14

Depends on the case then, at least in mine, implementing lazy loading in my Ionic app was straight forward. I just had to add @IonicPage() in the pages, create the new modules and modify app.module.ts that’s it, easy peasy

1 Like