Question

所以我正在使用jQuery Steps，并且在第一步，如果我有100多行的表，我生成每行的checbox，输入和下拉，整页很慢，不可能滚动（我必须等待10秒向下滚动，我的RAM和CPU上升。）

是否有一些脚本可以优化滚动条＆＃34;或者我应该怎么做才能解决这个问题。

我的部分代码如下：

<script src="/js/jquerysteps/jquery.steps.js"></script>
<script src="/js/jquerysteps/jquery.steps.min.js"></script>
<section>
<table id="data-table-selection" class="table table-striped">
  <thead>
  <tr class="table-bcg" id="table-header">
    <th class="td-100"><?= __('Assign?') ?></th>
    <th class="td-100"><?= __('Quantity') ?></th>
    <th><?= __('Product') ?></th>
    <th><?= __('Container action') ?></th>
    <th><?= __('Removal interval') ?></th>
  </tr>
  </thead>
  <tbody>
  <?php
  $i = 0;
  foreach ($products as $product):
    $i++
    ?>
    <tr>
      <td>
        <label class="checkbox big">
          <input type="checkbox" id="assigned_<?= $i ?>">
          <i class="input-helper"></i>
        </label>
      </td>
      <td>
        <?php
        echo $this->Form->input('item_[]', ['id' => 'product_' . $i, 'label' => false, 'class' => 'form-control kolicina', 'value' => '1']);
      </td>
      <td><?= $product['name'] ?></td>
      <td><?= $this->Form->input('task[]', ['label' => false, 'options' => $taskAction, 'default' => '1', 'id' => 'task_' . $i, 'class' => 'form-control select']); ?></td>
      <td><?= $this->Form->input( 'changeAction[]', [
          'label' => false,
          'options' => $removalAction,
          'default' => $selected,
          'id' => 'changeAction_' . $i,
          'class' => 'form-control select'
        ]);
        ?>
      </td>
    </tr>
  <?php endforeach; ?>
  </tbody>
</table>
</section>
<section>...</section>

JS代码

$(document).ready(function () {
      $("#myTable").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true,
        onFinished: function (event, currentIndex) {
          email_cc = ', ' + $('#cc_email_order').val();
          swal({
           ...
          });
        },

        labels: {
          finish: textFinish,
          next: textNext,
          previous: textPrevious,
          loading: textPleaseWait
        },

        onStepChanging: function (event, currentIndex, newIndex) {
          if (currentIndex == 0) {
            var ordered_by = $('#ordered_by').val();
            var ordered_by_email = $('#ordered_by_email').val();
            var telephone = $('#telephone').val();
            var email_cc = $('#cc_email_order').val();
             ....validation...

              $(document).ready(function () {
                $('#destination_numbers_preview').empty().append($('#destination_numbers option:selected').text());

...附加其他元素......

              });
              return true;
            }
            return false;
          }
          if (currentIndex > newIndex) {
            return true;
          }
        }
      });

如果我禁用jquery-steps，一切都会好的。所以根本没有滚动事件，但不知何故jquery-steps有问题，因为有超过100个产品的表。

Answer 1

听起来你需要加载更少的行来开始，因为页面上可能有很多数据。当你到达页面底部时，也许你可以加载更多内容。当您使用jQuery时，您可以尝试：

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()){
       //load more rows in
    }
 });

也许你还需要在顶部卸载东西。当用户滚动到顶部时，您需要一个类似的功能来加载您拥有的内容。

另一种可能更简单的选择是对结果进行分页并将1-10放在一个表上，然后将2-20放在另一个加载新请求的选项卡上，最后加载50个，否则可能会产生结果。

滚动期间的jQuery性能问题

1 个答案: