问题
appendTo() causes flicker when it is inside $.each....
$.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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv');
});
Right now i am appending every new div to #ResultsDiv inside$.each is it good/bad to do so... If it is bad
What can be done to make my divs appendTo() after the loop so that i it wont flicker....
EDIT:(based on answer)
var divs = '';
$.each(jsob.Table, function(i, employee) {
divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
});
$("#ResultsDiv").append(divs);
But that too doesn't stop the flicker...
回答1:
Appending to the DOM is a very expensive task to perform especially in a loop. You should try to add all your results to a string and then do one append after the each loop:
var dataToAppend = '';
$.each(jsob.Table, function(i, employee) {
dataToAppend += '<div class="resultsdiv" style="display:none"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
});
$('#ResultsDiv').append(dataToAppend);
$('#ResultsDiv').removeAttr('style');
The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.
Also try adding display:none to the resultsdiv and then remove that style after you perform the append to see if that helps with the flickering.
回答2:
what about this:
var divs = '',
$result = $("#ResultsDiv"),
$parent = $result.parent();
$result.empty().detach();
$.each(jsob.Table, function(i, employee) {
divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
});
$result.append(divs);
$parent.append($result);
来源：https://stackoverflow.com/questions/2544804/appendto-inside-each-in-jquery-seems-to-cause-flicker