Pattern: Lazy loading | James’ Coffee Blog


One of the programming patterns I have seen used in several contexts over the last year is lazy loading.

On the web, you can use lazy loading to tell the browser that an iframe or image should only be loaded when the viewport is sufficiently close to the resource. Using lazy loading lets the browser skip downloading resources that are not used straight away and instead focus on essential resources (i.e. styles, scripts, an image above the fold).

Separately, I worked on a Python project that involved loading images into memory for processing. The project worked fine with small datasets of images. But when someone tried to load a large dataset of images, we ran into a problem: the user’s computer would run out of memory because the project tried to load all images at the same time.

We fixed this by instead using lazy loading to load images only when they would need to be used, then removing them from memory afterwards. After this change, the out of memory error was fixed — we were no longer loading all data at once when we didn’t need to.

The above two examples show two performance benefits of lazy loading:

  1. Allowing resource prioritization, and;
  2. Ensuring that more resources are not loaded than are necessary to accomplish a task.



Source link

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top