Question

我有一个表（~1000行）必须预先加载到客户端。对于每一行，我想显示从远程服务器获取的图像。

然而，一次加载所有意味着1000个请求和大约50兆字节的转移，这不是太大。

如何确保数据表仅显示当前页面上的图像/搜索？

Answer 1

使用jQuery.Lazy。只需更改图片，然后添加包含原始图片的data-src即可。

<img src="empty.gif" data-src="originalImage.jpg" />

$(function() {
    var lazy = $("table img").Lazy({chainable: false});

    $("table").DataTable({
        drawCallback: function() {
            // update the images shown on table changes
            lazy.update();
        }
    });
});

Answer 2

虽然只有在显示一行后，才有可能以编程方式将图像链接放入IMG标记，但使用其他内容更容易。

使用jQuery Unveil结合Datatables＆＃39;简化了整个过程。 drawCallback。如果您不使用drawCallback并使用默认的Unveil代码，则搜索上的图片加载可能无法正常运行。

图片（行）：

<img src="placeholder.png" data-src="imagetoload.jpg" />

JS：

$(document).ready( function () {
    $('#tableid').DataTable( {
        "drawCallback": function( settings ) {
            $("#tableid img:visible").unveil();
        }
    });
});

数据表 - 仅加载可见图像

2 个答案: