具有延迟加载图像的数据表的工作示例

Question

我正在寻找数据 table 中 lazy-loading 个图像的工作示例，它在单击列标题更改排序后继续工作。

我最成功的方法是使用 jquery.lazyload 插件：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
    $(function() {
    $("img.lazy").lazyload();
    });
</script>

这是我引用图片的方式：

<img class="lazy" data-original="https://example.com/image.jpg" width="50" height="50" />

如果我从不更改排序，延迟加载工作正常。但是，如果我决定通过单击其中一个列标题来更改 table 的排序，延迟加载将停止工作，并且此时未下载的任何图像在我将它们滚动到视图中时将保持空白。

我不是天生的 javascript 或 jQuery 专家，所以必须从 SO 和其他地方的示例中学习。但是这个问题难倒了我。从我的研究中，我看到了很多关于它如何可能的评论和片段，但没有实际的工作示例证明这是受支持的。

https://datatables.net/forums/discussion/1959/image-thumbs-in-table-column-lazy-loading

我不会喋喋不休地说出我在这里和其他地方找到的许多其他链接，我只需要一些好心人的帮助。

Answer 1

由于我无权访问您的后端或有关您的情况的更多信息，我有点被这个问题所困扰，但我认为可以在绘图事件中调用您的延迟加载代码，例如这个：

$(document).ready(function() {
    $("img.lazy").lazyload();
    $('.table-data').DataTable({
        "drawCallback": function(){
            $("img.lazy").lazyload();
            setTimeout(function(){
                $(window).trigger("scroll")
            }, 1000);
        }
    });
});

我有一个示例 here，但我认为您可能正在使用服务器端处理？

Answer 2

使用 drawCallback 选项定义每次 DataTables 执行绘制时都会调用的函数。

例如：

$('.table-data').DataTable({
   drawCallback: function(){
        $("img.lazy").lazyload();
   }
});

有关代码和演示，请参阅 this jsFiddle。

具有延迟加载图像的数据表的工作示例

Working example of datatables with lazy loading of images

javascript

jquery

lazy-loading

datatables