Comment éviter le scintillement dans jquery?

J'utilise jquery avec WebForms asp.net ..... J'utilise PageMethods de asp.net et jquery ....Comment éviter le scintillement dans jquery?

Je suis vider un div sur clic de balises d'ancrage et de le remplir avec du nouveau contenu. ... Qu'est-ce qui se passe est mon sc scintillement lorsque mes nouvelles données sont chargées ... Comment éviter cela dans jquery? Puis-je utiliser un effet pour cette ....

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

</script>

et ma page,

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

et ma fonction getRecordspage() est

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"); 
      }); 
     } 
    }); 

}

Source

2010-03-30 Chendur Pandian

vous devriez essayer de construire le Html d'abord dans la boucle, et l'ajouter une seule fois à la dom. De cette façon, vous ne serez pas redessiné pour chaque employé.

EDIT:

Ce que j'aurais est une variable où vous stockez la ligne html vierge que vous insérez pour chaque employé

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>')

Puis, dans la boucle, vous insérez toutes les données de votre employé aux endroits corrects de ce morceau html en utilisant des sélecteurs et des fonctions jquery et vous ajoutez cette ligne à la variable allEmplyee.

Après la boucle, vous pouvez ajouter les styles à ces lignes (lignes paires et impaires par exemple) et enfin, vous injectez la variable allEMployee qui contient tous les résultats dans la page. Je pense que cela devrait le faire ... mais je ne suis pas maître jquery, juste un débutant :)
si cela prend du temps, alors vous devriez probablement afficher un gif loader ajax, il est important de montrer que votre application est en train de faire quelque chose, ou votre utilisateur va commencer à cliquer en attendant.

http://preloaders.net/

Source

2010-03-30 10:38:36

@serbech pouvez-vous expliquer un peu plus ... –

Comment éviter le scintillement dans jquery?

Répondre

Questions connexes