Skip to content

Commit

Permalink
Use What, Why, How and Summary Components
Browse files Browse the repository at this point in the history
  • Loading branch information
abdulrahmanshabeekmohamed committed Dec 14, 2024
1 parent 4cfb0dc commit 191d401
Show file tree
Hide file tree
Showing 7 changed files with 936 additions and 1,004 deletions.
134 changes: 60 additions & 74 deletions BlazorDemoComponents/Pages/Blogs/Wasm/DynamicallyLoadImage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,96 +4,82 @@

<Content FileName=@nameof(DynamicallyLoadImage) UseNewTableOfContentsMenu=true>
<ContentBody>
<h3 id="what">What we gonna do?</h3>

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

<p>
<strong>Note:</strong> If you have not done so already, I recommend you read the article on
<NavLink href="blogs/printing-barcode-to-label-printer-from-blazor-wasm" Match="NavLinkMatch.All">Printing barcode to label printer from Blazor WASM</NavLink>.
</p>



<h3 id="why">Why we gonna do?</h3>

<p>
Few months ago as of writing this article, I was observing some <ContentHighlight>performance issues</ContentHighlight> 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 <ContentHighlight>improve performance and reduce the load time</ContentHighlight> 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 <ContentHighlight>Dynamic Loading</ContentHighlight>. 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.
</p>
<What>
<p>
In this article, let's learn about how to <ContentHighlight>improve performance</ContentHighlight> by
<ContentHighlight>dynamically loading an image</ContentHighlight> in Blazor WASM apps.
</p>

<h4 id="use-case-for-dynamic-loading">Use Case for Dynamic Loading</h4>
<p>
<strong>Note:</strong> If you have not done so already, I recommend you read the article on
<NavLink href="blogs/printing-barcode-to-label-printer-from-blazor-wasm" Match="NavLinkMatch.All">Printing barcode to label printer from Blazor WASM</NavLink>.
</p>
</What>

<Why>
<p>
Few months ago as of writing this article, I was observing some <ContentHighlight>performance issues</ContentHighlight> 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 <ContentHighlight>improve performance and reduce the load time</ContentHighlight> 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 <ContentHighlight>Dynamic Loading</ContentHighlight>. 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.
</p>

<p>
The use case of dynamic loading are,
</p>
<p>
The use case of dynamic loading are,
</p>

<dl>
<dt><ContentHighlight>Load Request</ContentHighlight></dt>
<dd>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.</dd>
<dl>
<dt><ContentHighlight>Load Request</ContentHighlight></dt>
<dd>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.</dd>

<dt><ContentHighlight>Multiple Images</ContentHighlight></dt>
<dd>Any interaction that changes the displayed image if there is more than once.</dd>
</dl>
<dt><ContentHighlight>Multiple Images</ContentHighlight></dt>
<dd>Any interaction that changes the displayed image if there is more than once.</dd>
</dl>
</Why>


<How>
<h4 id="implementing-dynamic-loading">Implementing Dynamic Loading</h4>

<h3 id="how">How we gonna do?</h3>

<h4 id="implementing-dynamic-loading">Implementing Dynamic Loading</h4>
<p>
To implement dynamic loading, we need to store image path inside a variable in razor component and assign the image path as
<ContentHighlight>src</ContentHighlight> in <ContentHighlight>&lt;img&gt;</ContentHighlight> 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.
</p>

<p>
To implement dynamic loading, we need to store image path inside a variable in razor component and assign the image path as
<ContentHighlight>src</ContentHighlight> in <ContentHighlight>&lt;img&gt;</ContentHighlight> 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.
</p>
<GithubGistSnippet Title="Dynamically loading image in Blazor WASM" UserId="fingers10" FileName="d7b1f6b20d5218846a3202317c91a499"></GithubGistSnippet>

<GithubGistSnippet Title="Dynamically loading image in Blazor WASM" UserId="fingers10" FileName="d7b1f6b20d5218846a3202317c91a499"></GithubGistSnippet>
<DemoSnippet Title="Dynamic Image Loading">
<p class="[ text-black ] [ dark:text-white ]">
<b>
Click on Show Image button to load the image dynamically.
</b>
</p>
<Error>
<DynamicImageLoading></DynamicImageLoading>
</Error>
</DemoSnippet>


<h4 id="advantages-of-dynamic-loading">Advantages of Dynamic Loading</h4>

<DemoSnippet Title="Dynamic Image Loading">
<p class="[ text-black ] [ dark:text-white ]">
<b>
Click on Show Image button to load the image dynamically.
</b>
<p>
The advantages of dynamic loading are as follows,
</p>
<Error>
<DynamicImageLoading></DynamicImageLoading>
</Error>
</DemoSnippet>



<h4 id="advantages-of-dynamic-loading">Advantages of Dynamic Loading</h4>

<p>
The advantages of dynamic loading are as follows,
</p>

<ul>
<li><ContentHighlight>Bandwidth Savings</ContentHighlight>.</li>
<li><ContentHighlight>Faster Page load</ContentHighlight>.</li>
<li><ContentHighlight>Improved Performance</ContentHighlight>.</li>
</ul>

<ul>
<li><ContentHighlight>Bandwidth Savings</ContentHighlight>.</li>
<li><ContentHighlight>Faster Page load</ContentHighlight>.</li>
<li><ContentHighlight>Improved Performance</ContentHighlight>.</li>
</ul>
</How>


<h3 id="summary">Summary</h3>

<p>
<Summary>
In this article, we learnt how to <ContentHighlight>dynamically loading image</ContentHighlight> and <ContentHighlight>improve performance</ContentHighlight>
in Blazor WASM apps by going through the <ContentHighlight>performance issues</ContentHighlight> happened in I ❤️ .NET home screen. We also learnt
about the advantages of dynamic loading and its use cases along with a demo of dynamic loading in action. I hope you enjoyed reading this article.
Thank you for reading.
</p>
</Summary>
</ContentBody>
</Content>
Loading

0 comments on commit 191d401

Please sign in to comment.