数据表 - 仅加载可见图像答案

【问题标题】：Datatables - load only visible images数据表 - 仅加载可见图像
【发布时间】：2016-06-24 08:07:40
【问题描述】：

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

但是，一次加载意味着 1000 个请求和大约 50 兆字节的传输，这并不算多。

如何确保 Datatables 仅显示当前页面/搜索中的图像？

【问题讨论】：

请参观并阅读如何制作mvce
@randy 我认为这个特定示例不需要代码示例，因为这个问题纯粹是理论上的（我回答了我自己的问题）。
可能重复：stackoverflow.com/questions/28816318/…

标签： jquery image datatables

【解决方案1】：

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

使用jQuery Unveil 结合Datatables 的drawCallback 简化了整个过程。如果您不使用drawCallback 并使用默认的 Unveil 代码，搜索时的图像加载可能无法正常工作。

图片（行）：

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

JS：

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

【讨论】：

您是否在一秒钟内回答了自己的问题，或者您在这里做什么？
@eisbehr 这在 SO 上得到了很好的承认，即使您在提出问题之前得到了答案，也可以回答自己的问题，那里没有错。这可能对未来的读者有所帮助
@eisbehr 最后我检查了发布您自己的解决方案来解决您自己的问题不仅是被允许的，它是explicitly encouraged。
@Sašo 我不清楚。在我看来，这是一种奇怪的行为。但那时我必须道歉。对不起。

【解决方案2】：

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

【讨论】：