Same problem here

lazysizes already checks for the visibility property of lazyload elements and only loads them with a very low priority (never more than two, never before onload, never while scrolling etc.).

The main point why lazysizes does still download them are two things:
a) an element that has only visibility: hidden, is considered to be visible "soon" and you might want to load them before the visibility: visible kicks in. (The user has to wait, if the modal is visible).
b) an element that has visibility: hidden is considered to be changed to visibility: visible using a CSS transition and having an animation and some image decodes in parallel can result in bad animation performance.

As I said, these kinds of image might be downloaded, but with a very low priority, so it should not hurt performance of your site. And there are reasons to preload them. Do you still want to modify this behavior?

Thank you for the explanation about the visibility and functionality currently implemented. Maybe it's personal preference but I would like these elements to work the same as those off the page. Basically, if I can't see it, it shouldn't load.

Rather than changing the basic functionality of your script, would it be possibly to add a "container" parameter that accepted a DOM object? For example, if a container is provided, only image actually visible within that container would be loaded, ignoring anything not on screen. Again, I understand the possible reasons for loading more images, but, to me, if isn't showing on the screen, don't load it. Or at least, have the option to work that way.

@justinvoelker
I don't really understand your container proposal, but this should be done within a plugin, if needed. What I can do within the core script is to add an option to treat visibility: hidden equal to display: none. If you have a suggestion how to call this option please let me know.

@aFarkas
Thank you for working through this together. I think such an option would solve the issue at hand which is to prevent loading of any images not currently showing on the screen (regardless of whether or not they may soon become visible). The option could simple be named "loadHidden" with a default of "true." In my case, I could set it to "false" and those images considered hidden would be treated as not displayed and thus not loaded.

The container idea might not be necessary with the option you are proposing. My container proposal would simply be the non-body DOM element that is checked for image visibility when loading images. In my original example, there are 12 images showing inside of a div with a class "thumbnail_list" (which is the container). So, having an option to specific ".thumbnail_list" would theoretically mean that when the script is deciding which images to load, it would only look at that "thumbnail_list" class DOM element/container when deciding which images are visible. I'm not sure if this helps explain it at all or not but please let me know.

I just pulled the latest RC into my project and even with this new option set it is still loading images outside the visible box of the container. Is there perhaps something else I need to do to the image to ensure this works? Inspecting the images before that modal window opens shows that visibility is set to "visible" not hidden. What would make the image have its visibility set to hidden that would make this work?