Question

从服务器我得到带表格的HTML。

为了很好地渲染这个表，我使用了table-sorter jquery插件。

我遇到了以下问题：

当表足够长的页面加载真的很慢。调查结果 - 与图像下载有关的问题。例如，我的表中有100个表行。我有5行分页每行都有图像，最初在浏览器网络中加载页面时，我看到所有100个图像都加载了。

我想只在真正需要的时候才能实现图像加载。

我没有解决这个任务的问题。

请建议解决方案。

Answer 1

首先，您需要从服务器端获取必要的html（表的第一页）并根据需要更新DOM。或者再次询问服务器端。

然后，您可以使用类似Lazy Load Plugin for jQuery的内容来延迟加载这些图片。

可能就像这个一样简单：

function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i = 0; i < imgDefer.length; i++) {
        if (imgDefer[i].getAttribute('data-src')) {
            imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
        }
    }
}
if (document.readyState == 'complete') {
    init();
} else {
    window.onload = init;
}

jsfiddle

Answer 2

在阅读完问题之后，我决定向我的fork of tablesorter添加一个lazyload小部件...它目前只在GitHub存储库的主分支中：

如果您下载或安装存储库，请运行该演示以查找有关如何设置和使用该小部件的文档。

我计划很快发布一个新版本，以防您想等待。

延迟加载表格分类器中的图像

2 个答案: