Blazor Server图片加载时加载指示器失效问题咨询

核心原因 #

Blazor组件仅在状态变更被明确通知时才会触发重新渲染。你的代码中，在OnAfterRenderAsync里修改ImageSource.Loaded属性后，没有告知Blazor状态已变更，导致UI始终停留在加载状态。另外，当前串行遍历执行所有图片加载的逻辑，会让所有图片同时完成加载才更新UI，体验较差。

修复步骤 #

1. 触发状态变更：每次修改Loaded属性后，调用StateHasChanged()通知Blazor重新渲染UI。
2. 并行加载优化：使用Task.WhenAll并行处理所有图片加载，提升效率的同时，保证单张图片加载完成后立即更新对应状态。

修改后的完整代码 #

@page "/images"
@inject HttpClient Http
@inject IJSRuntime JS

<div>
    @foreach(var imageSrc in ImageSources)
    {
        <div>
            <img hidden="@(!imageSrc.Loaded)" id="@imageSrc.Id" />
            @if(!imageSrc.Loaded)
            {
                <span>Loading...</span>
            }
        </div>
    }
</div>

@code {
    private List<ImageSource> ImageSources = new(){
        new(Guid.NewGuid(), "https://picsum.photos/200/300"),
        new(Guid.NewGuid(), "https://picsum.photos/200/300"),
        new(Guid.NewGuid(), "https://picsum.photos/200/300"),
        new(Guid.NewGuid(), "https://picsum.photos/200/300")
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) // 仅在首次渲染后执行一次加载逻辑
        {
            var loadTasks = ImageSources.Select(LoadAndRenderSingleImage);
            await Task.WhenAll(loadTasks);
        }
    }

    private async Task LoadAndRenderSingleImage(ImageSource imageSrc)
    {
        var stream = await Http.GetStreamAsync(imageSrc.Url);
        await SetImage(imageSrc.Id.ToString(), stream);
        imageSrc.Loaded = true;
        StateHasChanged(); // 通知Blazor状态变更，触发UI更新
    }

    public async Task SetImage(string imageElementId, Stream imageStream)
    {
        await Task.Delay(1000);
        var dotnetImageStream = new DotNetStreamReference(imageStream);
        await JS.InvokeVoidAsync("setImage", imageElementId, dotnetImageStream);
    }

    public record ImageSource(Guid Id, string Url)
    {
        public bool Loaded {get;set;}
    }
}

关键说明 #

• firstRender判断：避免组件每次重新渲染都重复执行图片加载逻辑。
• 并行加载：通过Select生成单张图片的加载任务，Task.WhenAll并行执行，确保每张图片加载完成后立即更新自身状态并渲染。
• StateHasChanged()：手动触发Blazor的状态检测机制，让UI实时反映最新的加载状态。

MudBlazor的MudTable组件通过**ServerData属性**实现异步服务端筛选、排序、分页，核心逻辑如下：

1. 异步委托定义：ServerData接收一个Func<TableState, Task<TableData<T>>>类型的委托，其中TableState包含当前分页、排序、筛选的所有参数，TableData<T>则返回分页后的数据集和总数据条数。
2. 组件内部异步流程处理：当用户触发排序、筛选或分页操作时，MudTable会自动调用你提供的异步委托，从服务端获取最新数据。
3. 自动状态更新：异步委托执行完成后，组件内部会自动调用StateHasChanged()触发UI渲染，将新数据展示到表格中。

极简示例 #

<MudTable ServerData="@LoadServerData" T="Product">
    <HeaderContent>
        <MudTh>产品名称</MudTh>
        <MudTh>价格</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Name</MudTd>
        <MudTd>@context.Price</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private async Task<TableData<Product>> LoadServerData(TableState state)
    {
        // 模拟从数据库异步获取分页、排序后的数据
        await Task.Delay(500);
        var queryResult = GetFilteredProducts(state.Page, state.PageSize, state.SortLabel, state.SortDirection);
        return new TableData<Product> { TotalItems = queryResult.TotalCount, Items = queryResult.Items };
    }

    // 模拟数据库查询逻辑
    private (List<Product> Items, int TotalCount) GetFilteredProducts(int page, int pageSize, string sortField, SortDirection sortDir)
    {
        // 实现分页、排序、筛选逻辑...
        return (new List<Product>(), 100);
    }

    public class Product { public string Name { get; set; } public decimal Price { get; set; } }
}

核心原理 #

• 组件封装了异步操作的全流程：包括加载状态显示、请求防抖、状态变更通知等，无需开发者手动处理状态更新。
• 基于Blazor的异步生命周期机制：异步委托完成后，组件内部触发状态检测，自动完成UI更新。

内容的提问来源于stack exchange，提问作者Alex