Question about lazyload

Question

Question about lazyload

Closed this issue 9 years ago · 30 comments

Hello guys,

i am having a issue with the lazyload,

i have a table with several pages, and the lazy load works fine on the first page, he calls each image fine, but when i get to the end of the page (scrolling down) all the images on the rest of the pages are loaded on the same time, is this normal?

Thanks,

Fábio Ferreira

Answer 1 · 2016-03-01T12:29:54.000Z

Hi @fcferreira29!

The lazy load widget combines jquery-scrollstop and jquery_lazyload plugins, so really the widget is adapting those plugins to be used with tablesorter.

If you check out the lazy load widget demo you'll see that if you scroll to the bottom, only the visible images after you stop scrolling will load.

Hmm, are you saying that the combination of the pager and lazyload is making images load? If so, I think the problem might be the lazy load skip_invisible option. Set it to true. Or, set the pager removeRows option to true.

If that doesn't fix the problem, please provide a demo.

Answer 2 · 2016-03-03T16:52:57.000Z

that solved the problem, now i have another one,

using lazyload, you do a search on the filters, and then the images dont load (because i didn't scroll) "scroll" is the event i choose, the same happens when i select the next page of the pager, the images dont load, is there a way to change this? i am using "skip_invisible=true" so its normal the images dont load imediatly, but the visible ones dont eaven apear.

Answer 3 · 2016-03-03T18:53:28.000Z

Try adding this code after initializing tablesorter:

$('table').on('filterEnd', function(){
  $(window).trigger('scroll');
});

If that works for you, I'll include it in the lazy load widget.

Answer 4 · 2016-03-04T09:47:29.000Z

Hello,

i did this instead

$('table').on('pagerChange', function(){
       $( 'table' ).trigger( 'lazyloadUpdate' );
});

i think this solved the problem, with this, what do you think? (with this the images appear (the ones that are visible on the screen) and when i scroll the othes appear too 👍

Thanks,

Fábio Ferreira

Answer 5 · 2016-03-04T10:36:11.000Z

That solution is not working again, it appeared functioning but now is not.....i am trying to figure what changed

Answer 6 · 2016-03-04T10:53:52.000Z

i added this:

$('table').on('pagerChange', function(){
$(window).scrollTop(0);
$( 'table' ).trigger( 'lazyloadUpdate' );
});

this solves the problem, but when i use a filter the images dont load

Answer 7 · 2016-03-04T17:54:08.000Z

In that case, try binding to both:

$('table').on('filterEnd pagerChange', function(){
  $( 'table' ).trigger( 'lazyloadUpdate' );
});

Answer 8 · 2016-03-06T17:58:41.000Z

So, actually the "lazyloadUpdate" reinitializes the lazy load plugin... I ended up adding a $(window).scroll() in the code on "filterEnd".

This change is currently only available in the master branch. I'm not sure yet when I'll push a new release.

Answer 9 · 2016-04-01T10:40:15.000Z

Mottie i did this to solve the problem of the lazyload, tell me what you think of it:

$('table').on('pagerChange', function(){
    $(window).scrollTop(0); 
    $( 'table' ).trigger( 'lazyloadUpdate' );
    setTimeout(function() {
        window.scrollBy(0, 1)
    }, 1);
});

The scrollTop(0) -> covers the part of changing page
The

$( 'table' ).trigger( 'lazyloadUpdate' );
setTimeout(function() {
    window.scrollBy(0, 1)
}, 1);

-> covers the part of not having a scroll (when the number of results is not enought to trigger a scroll.

Answer 10 · 2016-04-01T12:33:16.000Z

So the change to the lazyload widget wasn't working?

Hmm, I don't think everyone would be happy using window.scrollBy(0,1) because it does move the page. Would $(window).scroll() work just as well? If it does, I'll add another scroll trigger inside the "lazyloadUpdate" function.

Answer 11 · 2016-04-01T12:58:25.000Z

i changed window.scrollBy(0,1) to $(window).scroll() and works, Thanks, Fabio FerreiraDate: Fri, 1 Apr 2016 05:33:21 -0700From: notifications@github.comTo: tablesorter@noreply.github.comCC: fcferreira@msn.comSubject: Re: [Mottie/tablesorter] Question about lazyload (#1169)So the change to the lazyload widget wasn't working?

Hmm, I don't think everyone would be happy using window.scrollBy(0,1) because it does move the page. Would $(window).scroll() work just as well? If it does, I'll add another scroll trigger inside the "lazyloadUpdate" function.

—You are receiving this because you were mentioned.Reply to this email directly or view it on GitHub

Answer 12 · 2016-04-01T17:13:05.000Z

Thanks again! A new update is now available.

Answer 13 · 2016-04-05T08:57:14.000Z

I have another interesting issue to report, when i use the print widget combined with the lazyload the pictures dont show, the thing is, the page loads, and i dont do scroll (so the photos are not loaded (that is natural and normal) when i do print the page (the pictures are not loaded on the print screen) is there a way to load them in the print screen? Thanks, Fábio Ferreira Date: Sun, 6 Mar 2016 09:58:45 -0800From: notifications@github.comTo: tablesorter@noreply.github.comCC: fcferreira@msn.comSubject: Re: [tablesorter] Question about lazyload (#1169)So, actually the "lazyloadUpdate" reinitializes the lazy load plugin... I ended up adding a $(window).scroll() in the code on "filterEnd".

This change is currently only available in the master branch. I'm not sure yet when I'll push a new release.

—Reply to this email directly or view it on GitHub.

Answer 14 · 2016-04-05T16:10:38.000Z

Hi @fcferreira29!

It looks like the lazyload plugin doesn't have a perfect solution yet (see #104).

I went ahead and modified the print widget to copy the data-original url over into the image src, but there is one caveat - make sure to set the print_now option to false so the popup window has time to finish loading all the images. When that option is set to true, it freezes all page processing and the images won't finish loading. I tried adding a 500ms timeout, but only a portion of images would finish loading.

Answer 15 · 2016-04-05T17:01:17.000Z

couldn't you just inject a one line script using .ready() to run the print, then it would print either way when the dom is ready, and if lazy load is loaded you could have it scroll the page then run print, that way all images would get loaded? It's just an idea, I haven't seen any of the cod and I don't use lazy loads, but just trying to help spit ball here.

Answer 16 · 2016-04-05T17:40:10.000Z

The dom ready event fires when the all the dom elements are in place. The window load event fires after all images are loaded.

The main issue here is that the print preview window doesn't execute any javascript, so you could use $('.lazy').trigger('appear'); to force loading of all lazyloaded images without scrolling, but it takes time for the images to complete loading, and once the print window is open, it stops all processing & loading.

The onbeforeprint event in Firefox appears to be just an event. It does not stop the print from occurring, so the solution in the lazyload plugin issue link I shared won't work. The "best" solution I can think of would be to include an images loaded script, and do the following:

$('.print').click(function(){
  $('.lazy')
    .each(function(){
      var $this = $(this);
      $this.attr('src', $this.attr('data-original'));
    })
    .imagesLoaded(function(){
      // all images have loaded
      $('#mytable').trigger('printTable');
    });
});

Answer 17 · 2016-04-06T09:40:27.000Z

Hello, that solves the problem of the load of the photos, the only issue is that he loads the photos from every page, is there a way to load only the ones that are on the current page?

Answer 18 · 2016-04-06T12:21:09.000Z

I used this to correct the problem, var isHidden = $(this).hasClass('filtered'); if(!isHidden){ var image = $(this).find('td .lazy'); images.push(image); } }) $(images).each(function(){ var imageNew = $(this); imageNew.attr('src', imageNew.attr('data-original')); }) tell me what you think, Thanks, FF

Answer 19 · 2016-04-06T12:26:47.000Z

It would be easier to use the :visible selector

$('.print').click(function(){
  $('.lazy:visible')
    .each(function(){
      var $this = $(this);
      $this.attr('src', $this.attr('data-original'));
    })
    .imagesLoaded(function(){
      // all images have loaded
      $('#mytable').trigger('printTable');
    });
});

Answer 20 · 2016-06-01T12:22:20.000Z

hello,

I tried the solution

$('table').on('pagerChange', function(){
    $( 'table' ).trigger( 'lazyloadUpdate' );
    setTimeout(function() {
        window.scroll()
    }, 1);
});

It works (changing page, scrolling, filtering) but its killing completely the page...i have a table with 4000 users (60x60 img each row) and with this solution the page is very slow in all browsers.

The page is much, much faster without the lazy loading...just loading the pictures normally!

Is there any better solution?

I noticed too that the amount of memory ant time to render the page is exactly the same using or not the lazy loading...wasn't supposed the be much faster?

Thanks

Answer 21 · 2016-06-01T12:46:42.000Z

Hi @tropicaldev!

Please make sure that the image markup includes the following:

<img class="lazy" data-original="images/logo.png" width="300" height="300">

Class includes "lazy" - can be changed using the lazyload_imageClass widget option.
Set data-original instead of a src attribute to target the URL - can be renamed using the lazyload_data_attribute widget option.
Include image width and height.

If you still can't get things working, please modify this demo showing the problem.

Answer 22 · 2016-06-01T14:01:41.000Z

im using it like this

<img class="lazy" data-original="images/logo.png" width="60" height="60" src="images/spinner.png">

i set the src with a spinner to show a spinner before the logo...but with src or not the behaviour is the same

if i remove the line

$( 'table' ).trigger( 'lazyloadUpdate' );

from the "solution" the page speed improves ( the filtering problem appears ) but it stills much faster just use:

<img src="images/logo.png" width="60" height="60">

i will try change the demo to demonstrate what im experiencing

thanks

Answer 23 · 2016-06-01T15:43:36.000Z

Oh wait, you have all 4000 rows loaded in the table at once? Well then yeah, the lazyloadUpdate method is only meant to be used when the pager is adding new content to the table. So you shouldn't be using it.

Or, maybe things would be better if you set the pager removeRows option to true. Then, only the selected rows will be added to the DOM.

Answer 24 · 2016-06-01T18:54:11.000Z

i have to lazyload all the content table? there is no solution to just do lazyload on the picture?

Answer 25 · 2016-06-01T19:19:31.000Z

The lazyload plugin only works on images.

What I was saying is that when a lazyloadUpdate is triggered, it applies the lazyload plugin to all .lazy images in the table. If you still want to use that method, then use the pager removeRows option because then only the selected rows are added to the DOM and the lazyloadUpdate won't apply to all 4000 rows.

Answer 26 · 2016-06-02T12:33:33.000Z

sorry,
used the term "lazyload" instead "remote load all content" by mistake

with the option removeRows = true the page stays more responsive (scrolling, changing page ) but stills very laggy (just doing scroll for instance)

I removed the "solution" to check if that was causing the lagginess, but no, the scroll stills somewhat laggy with lazy

Not using lazy on images, the scroll is very fluid even with 4000 users

Answer 27 · 2018-05-02T18:09:52.000Z

Sorry Mottie,

about this issue again...

In your demo you can check that when you sort a column the images aren't loading...it only starts loading when you scroll down to bottom and then scroll up again.

Now add this code (using sortEnd) to your demo and check that images load:

$('.tablesorter').on('sortEnd', function(){
$('.tablesorter').trigger('lazyloadUpdate');
//$(window).scroll();
});

The problem is that this solution, as we talk before, is not a good because its initializing the plugin everytime and creating lots of lag to the tablesorter (the user experience is degrading over time depending how many interactions are done and how fast)

Note that $(window).scroll() does not seem to do nothing so i disabled that line...can you you confirm this?

As im experiencing, for tables with alot of rows, user interaction a lot better without lazzy load...yes, dowload all pictures is bad but interaction is super-smoth and thats preferable almost anywhere.

This kills completelly the porpose of lazzy as its intended for this kind of situations

Answer 28 · 2018-05-08T00:59:21.000Z

Would you please modify the demo I shared above to show the problem you're encountering.

Answer 29 · 2018-05-23T17:12:08.000Z

Hi Mottie,

Thank you for your reply

Just run your example and do a sort on the name (before you do any scroll)...you can check that lazzy does not work unless you go to the bottom of the page!

now your demo with the "fix" :
http://jsfiddle.net/m7vozo1x/19/

Do the test you did before and it will "work" right?
So the fix solves the problem when you sort or change the page making images load.
But the problem now is when you have for instance a table with 10 pages each with 100 rows...the navigation becomes very sluggish each time you go to new pager and start scrolling

the "fix" is a no go for tables with many rows/pagers :(

Answer 30 · 2018-05-30T10:47:01.000Z

found the problem!

in the configuration im using using event 'scroll' instead of 'scrollstop'...original plugin accepts 'scroll' like you say in your documentation

maybe its worth state in your documentation that 'scroll' can be used but can cause lag problems in navigation

example using event 'scroll' instead of 'scrollstop'
https://jsfiddle.net/wty134u7/282/

thanks for your patience :)