I ❤️ .NET

Table of Contents

1. What we gonna do?
2. Why we gonna do?
3. How we gonna do?
4. Summary

What we gonna do?

In this article, let's learn about how to improve performance by dynamically loading an image in Blazor WASM apps.

Note: If you have not done so already, I recommend you read the article on Printing barcode to label printer from Blazor WASM.

Why we gonna do?

Few months ago as of writing this article, I was observing some performance issues in I ❤️ .NET home screen. The home screen was taking more than 10 seconds to load as I was showing all the posters in home screen. The numbers of posters at that time was some what close to 80+. I decided to improve performance and reduce the load time to give better user experience to the users. That's when I decided to load the images dynamically. When I say dynamically, I mean load the image only when it is required via a user action. This is called Dynamic Loading. I decided to load 5 images by default and kept remaining images inside show more button. This drastically improved the performance and reduced the load time. In this article, I will teach you how to implement dynamic loading in Blazor WASM apps.

The use case of dynamic loading are,

Load Request

Load the image only when it is required. This is useful when the image is not required immediately or load only after an interaction like button click.

Multiple Images

Any interaction that changes the displayed image if there is more than once.

How we gonna do?

Implementing Dynamic Loading

To implement dynamic loading, we need to store image path inside a variable in razor component and assign the image path as src in <img> tag. If the path is empty we can hide the code that sources the image. This will prevent the image from loading. The image will only be displayed to the user if the path is not empty.

Advantages of Dynamic Loading

The advantages of dynamic loading are as follows,

• Bandwidth Savings.
• Faster Page load.
• Improved Performance.

Summary