Non-visible images being loaded

[justinvoelker]

I am using a Bootstrap modal dialog to display a list of thumbnail that I am trying to lazy load. The container and offset options is set as follows to ensure scrolling of the entire page is not captured but only scrolling of the little container of thumbnails:

var bLazy = new Blazy({
    container: '#image-modal .image-list'
  , offset: 1
});

However, images far outside that container are being lazy loaded. You can see in the clip below that as I hover over each item to highlight that area on the page, images that are not visible but are in within the viewport height are still being loaded. Images falling below the viewport are not yet loaded. If I were to scroll down in the little window, the next row of three images would load, though they too are only in the viewport, but not actually visible.

How can one overcome this lazy load issue?

[justinvoelker]

Here is a CodePen so you can see the behavior. Granted, it does not involve a bootstrap widget but it exhibits the same behavior. In a container smaller than the page height, images along the entire height are loaded, not just those visible within the small container.

In this example, depending on monitor size, you may need to shrink your browser to see more details. With the current browser window I have open, ten images load instantly, followed the the remaining ten as I scroll down in the container.

https://codepen.io/justinvoelker/pen/qNOOMW

[vorbe]

Not sure how dirty this is but maybe you could try to re initiate it when the popup is called ?

$('.some-button').on('click',function(){
initBLazy();
console.log('initiate blazy again');
});

It's kind of hard to tell if that content is sitting on the screen or loaded via ajax or something later.

I sort of approached it this way when trying to deal with images hidden around things like the hidden-xs hidden-sm classes here: http://codepen.io/okconsumer/pen/yeWgqL this was based on window resize, maybe my problem is simpler (and it's not an ideal solution), but it could work for you this way?

[justinvoelker]

Thanks @vorbe. Those images exist as the page is loaded, not created via ajax or anything later. And actually, I first init Blazy on page load but then call revalidate() after that modal is opened. Without the call to revalidate() no images would ever be loaded since they were not visible when the page loaded. It just seems strange that when revalidate() is called, it evaluates visibility but does not stop at the bottom of the visible container.

[NeilVGD]

+1 I have the same issue with a vertical scrolling container. All the images are loaded as the page scrolls, not the container

[dinbror]

Fixed in 1.8.0