Force loading image even when not visible

[idoshamun]

I want some images on my website to lazy load without even being inside the viewport. In simple words, I want to skip elementInView check and force loading the image.

[dinbror]

Hi @idoshamun. What about the public function, load(), that comes with blazy?

[idoshamun]

It is actually much easier to just pass an option instead of calling the load function and passing the right elements, in my opinion anyway

[dinbror]

Yes :) but how would it know which images to load or not to load outside the viewport. Will you add a specific class or are you looking after a feature like gajus is proposing?

https://github.com/dinbror/blazy/pull/104

[idoshamun]

104 could help in other use cases.

I guess what I am aiming for is an option to pass to blazy constructor and every element in the given selector will be load without any relation to the viewport

[dinbror]

I see. But you can do that quite easy with the load function. I want to keep the script as small as possible:

var imagesToLoad = document.querySelectorAll('.force-lazy-load');
var blazy = new Blazy();
blazy.load(imagesToLoad);

[idoshamun]

I'll check this out!

On Wed, Oct 12, 2016, 19:50 dinbror notifications@github.com wrote:

I see. But you can do that quite easy with the load function. I want to keep the script as small as possible:

var imagesToLoad = document.querySelectorAll('.force-lazy-load'); var blazy = new Blazy(); blazy.load(imagesToLoad);

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dinbror/blazy/issues/110#issuecomment-253270877, or mute the thread https://github.com/notifications/unsubscribe-auth/AB5qHV7UC9DTeLf7m_JevmQf9Jb4J63sks5qzQ_wgaJpZM4KTSmi .

[k03n00b]

I think there could be better ways than ele.offsetWidth to check if element is visible or not. At least (ele.offsetWidth > 0 && ele.offsetHeight > 0) should be changed to (ele.offsetWidth > 0 || ele.offsetHeight > 0), because then it works with visible elements where's only height.

Used multiple hours to solve why my cover image wasn't loaded and loadInvisible did the trick. I have regular div with CSS background-image for preloading and few floating elements inside it, so offsetWidth is zero, even element is visible and real width for this element is over 600px.

[dinbror]

Hey @k03n00b

Do you have a link. I would like to see what you have done :) I always reserve the space for an image or background to avoid page reflows when it lazy loads

[dinbror]

Hey @idoshamun

Can I close this one?

[idoshamun]

Yap, if anything new pops up I'll let you know

On Sun, Oct 23, 2016, 21:25 dinbror notifications@github.com wrote:

Hey @idoshamun https://github.com/idoshamun

Can I close this one?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dinbror/blazy/issues/110#issuecomment-255604912, or mute the thread https://github.com/notifications/unsubscribe-auth/AB5qHeB2ur_WthMoCrE2RhSpfWdM2ynhks5q26aOgaJpZM4KTSmi .

[dinbror]

Coolio