Improve performance by dynamically loading image in Blazor WASM
Blazor
30 Articles
Table of Contents
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.
Code Sample - Dynamically loading image in Blazor WASM
Advantages of Dynamic Loading
The advantages of dynamic loading are as follows,
- Bandwidth Savings.
- Faster Page load.
- Improved Performance.