Question

我的viewmodel对象包含大约200到300个对象。

该对象的一个属性是转换为Base64string的100x100px图像。

以下是我渲染整个集合的代码：

<table class="table-condensed">
    <tbody>
        @foreach (var ua in day.Value)
        {
            <tr>
                <td style="width: 105px;">
                    <img src="data:image;base64,@ua.UserProfileImage" style="width:100px;height:100px;" alt="User Image" />
                </td>
                <td valign="top">
                    <b>@ua.UserFirstName @ua.UserLastName</b> <a asp-controller="Users" asp-action="File" asp-route-id="@ua.UserId">(Profile)</a><br />
                    @if (!string.IsNullOrEmpty(ua.TeamName))
                    {
                        <small>@ua.TeamName</small><br />
                    }
                    <span class="label label-default">@ua.FunctionName</span><text>&nbsp;</text><span class="label label-default">@ua.HireDate</span>
                </td>
            </tr>
        }
    </tbody>

控制器返回数据的逻辑和时间是0.5秒，所以我的问题不存在。

由于有很多图像，整个视图的渲染速度大约为5到8秒。

有没有办法改善这个数字？

我正在使用ASP.NET Core 2.

Answer 1

你可以使用Ajax javascript加载每个图像，你可以实现一些分页，加载时间会相同，但在客户端看起来更好

Answer 2

您应该考虑使用延迟图像加载 https://github.com/craigbuckler/progressive-image.js。您可以在演示中看到图像未加载，直到您滚动到目的地

渲染包含数百个图像的视图

2 个答案: