search

airfranceklm / ng-lazy-image

Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.
http://afklm.github.io/ng-lazy-image/
MIT License
351 stars 64 forks source link

Lazy load fails when image is in collapsed div #48

Closed ryanberckmans closed 8 years ago

ryanberckmans commented 8 years ago

My images are failing to lazy load when initialized in a list of collapsed divs using ui-bootstrap collapse directive.

<div ng-repeat="item in items">
    <div collapse="!item.expand">
         <div afkl-lazy-image="{{item.image}}"/>
    </div>
</div>

When item.expand is initially false, the div will load collapsed and all images on page will be eagerly loaded (not lazy).

If item.expand is true or I remove collapsing, lazy loading works normally.

Also I have only a single image; no scrollable container inside main scrollable window so afkl-image-container doesn't apply to me. Thanks for help

ryanberckmans commented 8 years ago

Resolved by forking...

My problem: lazy loaded images initializing with display: none were eagerly loaded, ignoring the laziness.

Solution: applied patch in #27

I didn't fully digest why this wasn't merged and am going to move on :+1: