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

Images won't load when they are on top of viewport #30

Closed markhaasjes closed 8 years ago

markhaasjes commented 8 years ago

See for example the demo page on: http://afklm.github.io/ng-lazy-image/.

When you place the image on top of the viewport, the first image is not loaded. It starts loading after scrolling. Maybe this issue refers to #29.

Removing the following lines of code will move the first image to the top of the page.

17. <h1>Angular lazy image directive</h1>
18.
19. <p>Directive for loading responsive image when container (which is preventing reflow) is in viewport. Available as a bower and npm component. This module was made while working on the KLM <a href="https://www.klm.com/destinations/nl/en/search">travel inspiration finder</a> as a test to contribute to Open Source, see <a href="https://github.com/afklm/ng-lazy-image">Github</a> for our source. We would like to thank Sandra Maas for making this possible. Resize, reload and scroll to see what gets actually loaded and when. Below you will find more examples.</p>
20.
21. <h2>Example</h2>
22.
SquadraCorse commented 8 years ago

Not related.

Can you try 

bower install 'git://github.com/afklm/ng-lazy-image.git#d06a35c16463906c2810c9556cf4983c7c5b4c4a'
markhaasjes commented 8 years ago

That's working. Issue solved. For what reason did you used the (remaining + height) !== 0?

SquadraCorse commented 8 years ago

See #16 but they forked the module for their own usage. For our usecase it didn't change much but in order to have most cases working i think a logo at the top should be able to use the module :)

markhaasjes commented 8 years ago

Okay, makes sense, but not sure if this was the only possible fix. In my case I was using a fullscreen image at the begin of the page.