jQuery Datatable使用图像资源太慢

如何解决jQuery Datatable使用图像资源太慢

插件使用的脚本：

  <script src="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

我有一个最多有19K行记录的数据表。我没有使用服务器端处理或AJAX，它只是DOM。我尝试迁移到服务器端处理，但是重新实现所有功能非常耗时。根据我的猜测，所有关于每条记录使用的图像资源都是如此，这使得数据表最慢。不过，它在本地环境下工作完美。本地与服务器的区别如下。

LOCAL HOSTING

LIVE ON SERVER

表的实现方式，下面的代码块。

          var tableone= $('#tableX').DataTable({
          "scroller": true,"deferRender": true,"responsive": true,"order": [[1,'asc']],"paging": true,"pageLength": 150,"bFilter": false,"searching": true,"rowCallback": function( row,data,index ) {
            if ( data[9] == "MATCH COLUMN" )
            {
              $('td',row).css('background-color','#b5b5de');
            }
            else if ( data[9] != "MATCH COLUMN" )
            {
              $('td','white');
            }
          },"drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null; 
            api.column(1,{page:'current'} ).data().each( function ( group,i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                      '<tr class="group"><td class="delBack"colspan="14">'+'<strong> THIS SHOULD BE GROUPIFIED : '+group+'</strong></td></tr>'
                    );
                    last = group;
                }
            } );
          },"autoWidth": false,"aoColumnDefs": [{ "bSortable": false,"bSearchable": false,"aTargets": [2,4,5,6,7,8,9,10,11,12,13 ] } ],"aoColumns": [{ "sWidth": "5%" },{ "sWidth": "5%" },{ "sWidth": "2%" },{ "sWidth": "3%" },{ "sWidth": "19%" },{ "sWidth": "10%" },{ "sWidth": "15%" },{"sWidth":"15%"}]
          });

我知道DOM，AJAX源和SSP。但是应该通过客户端而不是服务器来完成。如果造成过多负载，可以采取有效的方法来检索图像或资源，以提高其性能。任何建议表示赞赏。

编辑-图片上传

图像将作为字符串上传到数据库中，文件将上传到文件夹中。当图像被检索到数据表中时，就是这样

$upload_dir = 'uploads/';
<tbody>
      <?php
      $sql  = "SELECT * FROM `product` WHERE `status`= 'New'";
      $result = mysqli_query($conn,$sql);   
      if(mysqli_num_rows($result)){
      while($row = mysqli_fetch_assoc($result)) {

<td><img src ="<?php echo $upload_dir.$image ?>" height="30" width="30" data-toggle="modal" data-target="#imagemodal<?php echo $row['id']?>"></td>
<?php
    }
?>

然后，当单击图像缩略图时，将以模态显示完整图像。

编辑-删除图像后

LOCAL

LIVE

删除图像资源后，还不错。但对于19K记录，仍为10秒。是不是有点太多？

解决方法

帮助我的唯一解决方案是使用适当的实现方式迁移到服务器端，并且必须执行分页以使其更快。我已经重新开发了整个应用程序，并且使用AJAX处理了请求，从而减少了大量页面加载。它具有实际图像尺寸。感谢所有试图解决此问题的人。