0

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

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

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

<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。

4

2 回答 2

0

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

于 2018-06-18T16:55:21.127 回答
0

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

于 2018-06-18T16:45:26.117 回答