在 table 分类器中延迟加载图像

Question

从服务器我得到 html 和 table。

为了很好地呈现这个 table 我使用 table-sorter jquery 插件。

我遇到了以下问题：

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

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

我没有解决这个任务的经验。

请提出解决方案。

Answer 1

首先你只需要从服务器端获取必要的html（table的第一页）并根据需要更新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 中添加一个延迟加载小部件......它目前仅在 GitHub 存储库的主分支中：

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

我计划很快发布一个新版本，如果你想等的话。

在 table 分类器中延迟加载图像

Lazy load images in table sorter

html

javascript

jquery

tablesorter

lazy-loading