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

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-dzyables中的jquery-lazyload图像

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

有关代码和演示,请参阅此jsFiddle.