如何避免jquery闪烁？

我正在使用jQuery与asp.net webforms .....我正在使用asp.net pagemethods和jquery ....如何避免jquery闪烁？

我正在清空锚点标记点击并填充新内容的div。 ...什么是我的div闪烁时，我的新数据加载到它...如何避免这在jQuery中？我可以使用这个任何影响....

<script type="text/javascript"> 
     $(document).ready(function() { 
      getRecordspage(1, 5); 
      $("a.page-numbers").click(function() { 
      $("#ResultsDiv").empty(); 
       getRecordspage($(this).text(), 5) 
      }); 
     }); 

</script>

和我的网页，

<body> 
    <form id="form1" runat="server"> 
    <div id="ResultsDiv"> 

</div> 
<div class="pager"> 
<a ID="lnkbtn0" class="page-numbers" href="javascript:void(0);">1</a> 
<a ID="lnkbtn1" class="page-numbers" href="javascript:void(0);">2</a> 
<a ID="lnkbtn2" class="page-numbers" href="javascript:void(0);">3</a> 
<a ID="lnkbtn3" class="page-numbers" href="javascript:void(0);">4</a> 
</div> 

    </form> 
</body>

和我getRecordspage()功能

function getRecordspage(curPage, pagSize) { 
    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/GetRecords", 
     data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(jsonObj) { 
      var strarr = jsonObj.d.split('##'); 
      var jsob = jQuery.parseJSON(strarr[0]); 
      $.each(jsob.Table, function(i, employee) { 
       $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv'); 
      }); 
      $(".resultsdiv:even").addClass("resultseven"); 
      $(".resultsdiv").hover(function() { 
       $(this).addClass("resultshover"); 
      }, function() { 
       $(this).removeClass("resultshover"); 
      }); 
     } 
    }); 

}

来源

2010-03-30 Chendur Pandian

你应该尝试打造的HTML第一在循环，其追加一次到DOM。这样你就不会为每个员工重绘。

编辑：

那么我有什么是存储您插入每个员工

var allEmployees; 

    var empLine = $('<div class="resultsdiv"> 
    <br /> 
    <span class="resultName"></span> 
    <span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp; 
    <span class="resultfieldvalues"></span> 
    <br /> 
    <br /> 
    <span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues"></span> 
    <span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp; 
    <span class="resultfieldvalues">' + employee.FixedSalary + '</span> 
    <span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;</span>&nbsp; 
    <span class="resultfieldvalues"></span> 
</div>')

然后，在循环中的空白HTML行的变量，输入所有数据通过使用jQuery选择和功能这个网站块的正确的地方你的员工，并追加此行到allEmplyee变量。

循环后，可以将样式添加到这些行（偶数和奇数行，例如），最后，你注入保存所有的结果到页面的allEMployee变量。我认为应该这样做......但我没有jQuery的主人，只是一个初学者:)
如果需要一些时间，那么你或许应该显示一个ajax装载机GIF，它表明你的应用程序在做很重要一些东西，或者你的用户会在等待的时候开始点击。

来源

2010-03-30 10:38:36

@serbech你能解释一下更多... – 2010-03-30 10:45:09

如何避免jquery闪烁？

回答

相关问题