search

dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 355 forks source link

What is the meaning of "loadInvisible"? #175

Closed robsch closed 3 years ago

robsch commented 5 years ago

I have to set loadInvisible to true, so that all works as expected. Found it out by chance. But I don't know why. Could anyone describe this option please? Miss some more documentation in general.

In my case there is a table where each row contains an image that should be lazy-loaded. It was working without setting loadInvisible to true until I added a re-ordering of the rows (with jQuery appendTo that removes/detaches (?) a row first if it is already part of the parent), though I called revalidate afterwards. After that all remaining images were not loaded anymore. Scrolling didn't cause lazy-loading anymore.

I'm not sure if the setting is required or if it is just an side-effect. Actually, I wouldn't say that my images are 'invisible'...

Thanks for some explanation.

mitchellcarroll commented 4 years ago

The script loads the element 100px before the element is visible, unless you alter the "offset" value. If you have a slideshow or another feature that hides elements off screen then you can load those elements before they are visible by setting "loadInvisible" to true.

hope that helps.

lems3 commented 4 years ago

I also am tryng to understand the meaning of this setting. We tried to use it to solve an issue that we had with a slideshow, but the end result is that everything gets loaded, which more or less disable the lazy loading of elements of the page...

dinbror commented 3 years ago

@robsch @lems3 If "loadInvisible" is enabled it'll load elements when they are in the viewport even if they're hidden with display: none or visibility: hidden. In a slideshow you need to call either revalidate or load on slide (http://dinbror.dk/blog/blazy/?ref=github#Functions). Blazy is only listening on scroll/resize event