-
Notifications
You must be signed in to change notification settings - Fork 356
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Non-visible images being loaded #96
Comments
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. |
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(){ 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? |
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 |
+1 I have the same issue with a vertical scrolling container. All the images are loaded as the page scrolls, not the container |
Fixed in 1.8.0 |
I am using a Bootstrap modal dialog to display a list of thumbnail that I am trying to lazy load. The
container
andoffset
options is set as follows to ensure scrolling of the entire page is not captured but only scrolling of the little container of thumbnails: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?
The text was updated successfully, but these errors were encountered: