Question 245412 in Html Question posted in
Some basic documentation can be found here.

Html – Blazor <img> element showing old source during load of new source

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;
}
Tags:

2

Answers


  1. 0

    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 ?? "";
}
    Login or Signup to reply.
  2. 0

    I assume you can achieve what you want (be back to the loading background css) by actually doing the following:

    [Parameter]
public ImageInfo ImageInfo { get; set; } = default!;

-->

[Parameter]
public ImageInfo? ImageInfo { get; set; }

---------------------------

<img class="attachment" src="@url" type="image/jpeg" />

--> 

@if(ImageInfo is not null) 
{
   <img class="attachment" src="@url" type="image/jpeg" />
}

---------------------------

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();
}

-->

private void ShowNextImage()
{
    _currentImage = null;
    StateHasChanged();  // maybe useless, because normally changing the value of a parameter will automatically call StateHasChanged in Blazor
    _currentImage = GetNextImage();
}

    By doing that, you un assign the image, it will then no longer display the <img /> tag, so the loading background css will be visible, then you will trigger the loading of the image, and it will be displayed when loaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search