数据表 - 仅加载可见图像

Question

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

然而，一次加载所有内容意味着 1000 个请求和大约 50 MB 的传输量，这并不是太大。

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

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();
        }
    });
});