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

How to implement lazy load on text

本文关键字：实现 延迟加载 文本      更新时间：2023-09-26

我有一个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需要很长时间才能被解析并提供给主应用程序，有时脚本会进入非响应模式，提示用户停止脚本。

有没有一种简单的方法可以实现所谓的"懒惰加载"，这样我就可以在用户向下滚动屏幕时提供日志（就像谷歌图像搜索中发生的那样）？

将感谢您的帮助。谢谢

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

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

相关文章：