Question

我有一个ASP.NET MVC应用程序模块，它为用户提供日志数据。 MVC页面有一个过滤器，通过Ajax在过滤器选择中检索数据，其值为1周，2周，3周等。

这是我提供日志的功能

[HttpGet]
public ActionResult GetLogs(DateTime startDate, DateTime endDate)
{
    var logs = applicationService.GetAllLogs(startDate, endDate).OrderByDescending(x => x.DateTime).ToList();
    return PartialView(logs);
}

这是我的部分视图

@model IEnumerable<ApplicationLogObj>
<table style="width:100%">
@foreach (var log in Model)
{
    <text>
    <tr>
        <td>
            <em>@log.DateTime.ToString("MM/dd/yyyy HH:mm:ss") &nbsp;</em>
        </td>
        <td>
            @log.UserName
        </td>
        <td>
            @log.Action on @log.Module 
        </td>

    </tr>       
    </text>
}
</table>

以下是我运行的jquery函数，用于显示主页面上的日志。

$(function () {

  $("#btn1Week").click(function () {

    var start = '@DateTime.Now.AddDays(-7).ToString("MM/dd/yyyy")';
    var end = '@DateTime.Now.ToString("MM/dd/yyyy HH:mm:ss")';
    getLogs(start, end);
  });
  $("#btn2Week").click(function () {

    var start = '@DateTime.Now.AddDays(-14).ToString("MM/dd/yyyy")';
    var end = '@DateTime.Now.ToString("MM/dd/yyyy HH:mm:ss")';
    getLogs(start, end);
  });
  $("#btn3Week").click(function () {

    var start = '@DateTime.Now.AddDays(-21).ToString("MM/dd/yyyy")';
    var end = '@DateTime.Now.ToString("MM/dd/yyyy HH:mm:ss")';
    getLogs(start, end);
  });

  function getLogs(start, end) {

    $.ajax({
      type: "GET",
      url: "/AppLogs/GetLogs",
      dataType: 'html',
      data: { startDate:start, endDate:end },
      contentType: "application/html; charset=utf-8",
      success: function (result) {
        $("#logDiv").html(result);
      }
    });

    }

});

应用程序运行正常，但问题是日志包含超过500条记录仅一周。因此，当用户点击说3周时，HTML需要花费大量时间进行解析并提供给主应用程序，有时脚本会进入非响应模式，提示用户停止脚本。

是否有一种简单的方法可以实现所谓的“延迟加载”，这样我就可以在用户向下滚动屏幕时提供日志（就像在Google图像搜索中一样）？

非常感谢您的帮助。感谢。

Answer 1

答案是jScroll（http://jscroll.com/#examples）。它符合目的。

Answer 2

您可以尝试以下项目： https://github.com/boylegu/vue-lazyload-text 支持lazyload的高性能魔术文本。

如何在文本上实现延迟加载

2 个答案: