Question

我正在寻找一个在数据表中延迟加载图像的工作示例，在单击列标题以更改排序后继续工作。

我最成功的方法是使用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" />

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

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

jquery-lazyload images in jquery-databables

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

我不会发现我在这里和其他地方找到的众多其他链接，我只需要一些善良的帮助。

Answer 1

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

例如：

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

请参阅this jsFiddle以获取代码和演示。

Answer 2

我有点困惑，因为我无法访问您的后端或有关您的情况的更多信息，但我认为可行的方法是在抽奖中调用您的延迟加载代码像这样的事件：

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

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

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

2 个答案: