如何实现对文本延迟加载 [英] How to implement lazy load on text

查看:156
本文介绍了如何实现对文本延迟加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个用于记录数据到用户的ASP.NET MVC应用程序模块。 MVC的页面有一个通过Ajax获取上具有类似值1周,2周,3周等过滤器选择数据的过滤器。

I have an ASP.NET MVC Application module that serves log data to the user. The MVC page has a filter that retrieves data via Ajax on filter selection which has values like 1 Week, 2 Week, 3 Week etc.

这是我的功能服务日志

[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函数。

and the following is the jquery function I am running to show the log on the main page.

$(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被解析并担任主应用程序,有时剧本进去没有反应模式,提示用户停止脚本。

The application is running fine, but the problem is that the log consists of over 500 records just for a week. So when the user clicks on say 3 weeks, it takes a lot of time for the HTML to be parsed and served to the main application and sometimes the script goes in not responsive mode prompting the user to stop script.

有没有实行所谓的懒加载这样我就可以成为该日志的用户向下滚动屏幕(就像它发生在谷歌图片搜索)?

Is there a simple way to implement what is known as 'lazy load' so that I can serve the log as the user scrolls down the screen (much like it happens in Google image search)?

请问AP preciate的帮助。谢谢你。

Will appreciate the help. Thanks.

推荐答案

答案是jScroll(的http:// jscroll。 COM /#范例)。它服务的目的。

The answer was jScroll (http://jscroll.com/#examples). It serves the purpose.

这篇关于如何实现对文本延迟加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆