Issue
Sometimes it takes up to 5 seconds to load a new source into that same image control, during which time the old image is shown. Is there a way to clear it or have it revert to the background (which is a loading gif) during that time of loading the new source?
Here is the code:
<img class="attachment" src="@url" type="image/jpeg" />
So when @url is changed, it loads the new image but keeps the previous image visible during the loading time.
This is invoked by the change of a paremeter by another blazor component:
[Parameter]
public ImageInfo ImageInfo { get; set; } = default!;
private string url => ImageInfo.GetImageUrl;
... and the parent component instigates this by setting ImageInfo
when an area is clicked - and then calling StateHasChanged()
:
<div class="next-image" @onclick="() => ShowNextImage()">
<div class="loading">
<ImageViewer ImageInfo="_currentImage" />
</div>
private void ShowNextImage()
{
_currentImage = GetNextImage(); // gets the next, this works, and has a valid URL inside, this isn't the issue - it shows, it just takes time to load and during that time, the previous image is shown
StateHasChanged();
}
For info, the css here:
.loading {
background: transparent url(./loading.gif) no-repeat scroll center center;
}
Solution
Try setting an empty or null state to _currentImage before the GetNextImage() method is called.
private async Task ShowNextImage()
{
_currentImage = null;
await Task.Delay(1); // might or might not need this
_currentImage = GetNextImage();
}
Then modify your ImageViewer
component to handle nullable a ImageInfo?
@if(ImageInfo is not null){
<img class="attachment" src="@url" type="image/jpeg"/>
}
@code{
[Parameter]
public ImageInfo? ImageInfo { get; set; }
private string url => ImageInfo?.GetImageUrl ?? "";
}
Answered By - RBee
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.