问题描述:

From server I get html with table.

To render this table nicely I use table-sorter jquery plugin.

I faced the following issue:

When table enough long page loads really slow. Investigation result - issues related with images downloading. For example I have 100 table rows in my table. I have pagination by 5 lines.

Each line have image and initially when page loads in browser network I see that all 100 images loads.

I want to achieve that image loads only when it is really needs.

I have not expirience in resolving this task.

Please suggest solution.

网友答案:

After reading your question, I decided to add a lazyload widget to my fork of tablesorter... it is currently only in the master branch of the GitHub repository:

  • widget-lazyload.js
  • example-widget-lazyload.html

If you download or install the repository, run that demo to find documentation on how to setup and use the widget.

I plan on making a new release soon, in case you want to wait.

网友答案:

At first you need to get only necessary html (first page of the table) from server side and update the DOM as required.. maybe ask the server side again.

Then you'd better lazy load those images by using sth like Lazy Load Plugin for jQuery.

Could be as simple as this one:

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

相关阅读:
Top