Unable to manually trigger the check on lazyloaded elements

[ratibus]

Hello

Use case: I have a grid of lazyloaded images (hundreds of images) and on the top of the page some features to filter these images.

The issue is: when I use my filter features, some images under the fold are supposed to be loaded as some of above the fold images are excluded (=hidden). But there are not, I need to scroll or resize the screen for them to be loaded.

Indeed it seems that your in-viewport library "only" listens to scroll, resize and DOM mutation events. None of them are triggered in my case. There seems to be no public method to call to force the debouncedCheck call (it would not be a problem for me to trigger the call manually in my own code, as my use case is quite specific).

Here are some screenshots to show the issue :

First display of the page:

Then we click on the button:

I have to scroll down for the right images to appear:

I put this demo online : http://ratibus.net/vvo_lazyload/

Thanks in advance :)

[ratibus]

For example Echo.js expose such API: https://github.com/toddmotto/echo#render

[vvo]

DOM mutation events. None of them are triggered in my case.

I think adding a class should trigger a DOM mutation event right? But here you are adding a class on the container and we only check for mutation changes on images themselves (https://github.com/vvo/in-viewport/blob/f2ccb3db0565dbc9c4ae4e596c2f6405ed8f1ead/in-viewport.js#L240)

Yes the best way would be to expose the checkAll from in-viewport https://github.com/vvo/in-viewport/blob/f2ccb3db0565dbc9c4ae4e596c2f6405ed8f1ead/in-viewport.js#L236 in the in-viewport returned object.

Then from the lazyload returned register method, attach checkAll https://github.com/vvo/lazyload/blob/a0889aa443eac6001a1bea5c4c6652b214814fbd/lazyload.js#L19.

We could name it manualCheck. Smg like that. As I do not need this, I am accepting a PR (so one on in-viewport, one on lazyload, with tests it would be awesome :D)

Thanks for the awesome bug report :)

[ratibus]

Thanks for your answer but I do know how to "attach checkAll" (I see for the exposition of checkAll in the in-viewport lib). Javascript is not my main programming language :)

So I will not be able to make a PR for this issue.

[ratibus]

So I dug into this issue and find that you already fixed it in in-viewport with the following commit vvo/in-viewport@49d9f2411ee4e48f61e7fe565f03bd2f33f41d7c (btw your code comment says 200ms but the code says 150ms :)), which is available since v3.2.0.

The problem is in fact that the lazyload build you provide (https://github.com/vvo/lazyload/tree/master/build) is based on in-viewport@3.1.0.

So could you update the build available on lazyload master (it seems that when you tag a new version you do not update build directory and bower.json file) ?

Thanks.

[vvo]

Ah yes I could do that, I think I will provide an option to disable it and do the manual check exposure also. Because setInterval might be too slow in some usecases.

[yuvalshu]

Hi, I'm facing the same issue with items becoming visible on button click - would appreciate some details on how to invoke the check manually at time of click. Thank you!