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

Loading not triggered when switching between views #26

Closed koalabeer closed 8 years ago

koalabeer commented 8 years ago

Hi,

Really like your plugin, was very easy to get started. I did notice a little 'feature'.

I have a list of images in a List View. When i click to a Detail View, where additional information is shown about the image and then back to the List View, only the first row of images is loaded. Although 10 more images are already in the Viewport. When i scroll the browser 1px after i got back to the list view, the lazy load is triggered and the images are loaded fine.

Best regards, Tim

SquadraCorse commented 8 years ago

Tim, do you have an online example? For me it is easier to breakpoint it since our own examples work.

koalabeer commented 8 years ago

Yeah, i can probably setup an online demo tomorrow for you to look at.

I've also noticed it when i was filtering my list (changing which items are shown in ng-repeat)

I'll give you an update tomorrow!

Thanks! Tim

On Sat, Sep 12, 2015 at 4:11 AM -0700, "SquadraCorse" notifications@github.com<mailto:notifications@github.com> wrote:

Tim, do you have an online example? For me it is easier to breakpoint it since our own examples work.

Reply to this email directly or view it on GitHubhttps://github.com/afklm/ng-lazy-image/issues/26#issuecomment-139749537.

SquadraCorse commented 8 years ago

when running the sample please check c7483811e31f5d45c896c03a024c7fc4c7a151ab overthere i created an repeat sample with filter demo

SquadraCorse commented 8 years ago

http://afklm.github.io/ng-lazy-image/sample-repeat.html

koalabeer commented 8 years ago

Thanks, will have a look at it tomorrow!

On Sat, Sep 12, 2015 at 6:49 AM -0700, "SquadraCorse" notifications@github.com<mailto:notifications@github.com> wrote:

http://afklm.github.io/ng-lazy-image/sample-repeat.html

Reply to this email directly or view it on GitHubhttps://github.com/afklm/ng-lazy-image/issues/26#issuecomment-139772300.

koalabeer commented 8 years ago

I'm trying to create a simplified example to check if some other part of my code is causing the problem (which is most likely, as i'm still new to Angular). But i haven't been able to consistently reproduce the problem. Which so far makes me think some of my other code is causing troubles...

I'll report back if can find anything. So far i'm assuming i made a error somewhere else which causes your plugin to not be able to do what is should do.

Thanks for the help so far!

SquadraCorse commented 8 years ago

No worries, angular keeps on changing it's core so we all will be new in some regions. Just open a ticket if you are stuck. The directive is depending on two things: scope (so knowing when it will be added) and position calculation. Maybe we have a bug in this calculation but then i need a sample :) Good luck!

koalabeer commented 8 years ago

Hi,

I've had a little more time to test my problem and have been able to reproduce my problem. I'm using a grid with a toggle checkbox to change the layout of the grid with 1 large image per row or 4 small images per row.

The Lazy Load script calculates the offsets of the elements to see if they are in the viewport and need to be loaded. But even if the Layout is set to 4 small images per row, the calculations appear to be performed on the 1 large image per row layout. The amount of large images in the 1 per row situation determine the amount of small images shown. (if only 2 large images are shown due to screen size restriction, when you toggle to 4 images per row, again only 2 images are loaded)

The calcuations seem to be performed before the styling is applied which changes the grid elements positions.

Simple example with the problem: http://litedesigns.nl/lazy-test/sample-repeat.html

I hope you can shed some light on why calculations are performed on incorrect list layout.

Thanks! Tim.

SquadraCorse commented 8 years ago

Yes you switch by ng-class (more or less how we do stuff with jQuery). So $scope wise nothing changes. Can you try with an ng-include where you include the correct template based on this switch? Maybe i can introduce an event to listen on so you are able to trigger it, but in your case the magic happens in the ng-class. I will look at the calculation! Now i can breakpoint it, thanks.

koalabeer commented 8 years ago

I can give it a try, i'll follow up on this later.

Your code which performs the offset calculations is called each time you toggle the layout though

SquadraCorse commented 8 years ago

Stop, i found it :)

koalabeer commented 8 years ago

\o/

SquadraCorse commented 8 years ago

So when setting a breakpoint at 'remaining' inside the directive code I can see that the first li is 100% wide and because of that the further calculations are right because the first image takes the whole screen.

You can try by having the class="{{var}}" where var is based on the toggle? Or an ng-include / ui-view which makes two different scopes for both. But you can also try by looking at the styles :) Maybe it is an priority issue still (ng-class).

Please set the breakpoint yourself and see for styles being applied!

koalabeer commented 8 years ago

Using class="{{var}}" does not help. Then it depends on the initial block-grid class. If initially the large images are show (1 per row), the problem persists. If initially the small images (4 per row) are shown, the problem is solved. Problem is that i save the layout display setting in localStorage for next time user visits (or refreshes the page), the same layout display is shown (grid or list)

Works: http://litedesigns.nl/lazy-test/block-grid-4/sample-repeat.html Doesn't work: http://litedesigns.nl/lazy-test/block-grid-1/sample-repeat.html

SquadraCorse commented 8 years ago

No, you can use an 'ng-if' even or 'ng-include' or 'ui-view' if you use routes. So first you check which view you want to provide (based on default, sessionstorage, localstorage, Provider whatever). THEN you render the correct view.

SquadraCorse commented 8 years ago

please look at ui-router! That is a real view concept (so with states also can be reloaded)

koalabeer commented 8 years ago

Thanks for all the tips. Have to go now, but i'll do some additional testing later :)

On Sat, Sep 19, 2015 at 3:34 AM -0700, "SquadraCorse" notifications@github.com<mailto:notifications@github.com> wrote:

please look at ui-router! That is a real view concept (so with states also can be reloaded)

Reply to this email directly or view it on GitHubhttps://github.com/afklm/ng-lazy-image/issues/26#issuecomment-141643704.

koalabeer commented 8 years ago

The ui-router is looking really interesting. Gonna give that a go! My enitre application IS only filtering, sorting and searching the list of items. Toggling between views to provide users the interface the prefer and clicking to detail views of a single item and back to the filtered list.

I tried ng-include before, but that feels slow (delay is too big between parts being loaded). So splitting up my filters, sorting buttons and different list views in different views is gonna slow down my application noticeably.

SquadraCorse commented 8 years ago

OK. Then use the dev version currently in our master. Since others where using transitions and stuff i now check if the item has a width (dirty check for if vissible). See example: http://afklm.github.io/ng-lazy-image/sample-hide-show.html So if you now use an ng-if for both cases then it will be solved.

bower install 'git://github.com/afklm/ng-lazy-image.git#7fb65b2631e26af3c79c0cc5e153d1798b406bd0'