Как избежать мерцания в jquery? - PullRequest
Новая
       13

Как избежать мерцания в jquery?

0 голосов
/ 30 марта 2010

Я использую jquery с веб-формами asp.net ..... Я использую методы страницы asp.net и 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");
            });
        }
    });

 }

1 Ответ

1 голос
/ 30 марта 2010

Вы должны попытаться сначала построить Html в цикле, а добавить его только один раз в dom. Таким образом, вы не будете перерисовывать каждого сотрудника.

EDIT:

У меня была бы переменная, в которой вы храните пустую строку HTML, которую вы вставляете для каждого сотрудника 

    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, просто новичок:)
если это займет некоторое время, то вам, вероятно, следует отобразить gif-загрузчик ajax, важно показать, что ваше приложение что-то делает, или ваш пользователь начнет ждать во время ожидания.

http://preloaders.net/

...