images loaded only after first scroll

[levuro]

Hello - first of all thanks for this great piece of software.

Can you please help me with this? A simple view and a controller

-----------Controller code---------

 constructor(private $scope:OverviewScope , $stateParams:OverviewScope , private ContentFeedService , private Constants, private $filter) {

        ContentFeedService.getOverviewByType($stateParams.id,(result:Array<Joiz.Interfaces.Content>) => {

            $scope.items = result;  //this is my ajax result -
        });

------------view ----------------

Now - when i load this page the ajax will execute and text content will be bound - the images will not be displayed - only after i scroll a fraction on the page. if i add 'nolazy':true the images appear without any scolling using a normal ng-srcset also displays the images straight away can this be fixed? is it my controller coder or the view syntax? thanks Eric

The directive works in linking phase, and when scope is changed it reacts on it. Please make a plunkr or something online where you just mock your async call. Then we can put breakpoints.

[levuro]

I tried the experimental bower version from https://github.com/afklm/ng-lazy-image/issues/30 but the problem still persists -

http://staging.insight.tv/#!/show

its the top batch of images

as a temporary solution i am using now

<div ng-if="value.teaser_image.id"> <div class="afkl-lazy-wrapper" afkl-lazy-image-options="{'nolazy':true,'alt':[[value.name]]}" afkl-lazy-image="...."/>

instead of

 <div class="afkl-lazy-wrapper"  afkl-lazy-image-options="{'alt':[[value.name]]}" afkl-lazy-image="....."/>

[SquadraCorse]

can you have staging to not uglify and not set it to nonlazy? then i can debug and help, with my own setup i can't replicate. Nice site btw!

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

[AlgusDark]

Hey, I have the same problem. I have a $scope.images but I only populate it once. When I change to other page, I can't see the images. This is a plunkr: http://plnkr.co/edit/DJe6BrzlImNfWQLSe04j?p=preview

[SquadraCorse]

I think in your case $scope is cleared for every route. Allthough you give every route the same controller the scope is new and items attached to it are not persistent.

So Log what is in scope and you will notice (i could not run it because of chrome telling rawcontent is text/plain), also see if scope $destroy is triggered by route change and then you will know for sure.

So best is to cache the images in your service!! And then attach them on your scope always.

[SquadraCorse]

Normally if you switch stuff without changing scope then the image container doesn't notice the change so you broadcast it yourself to notify them $scope.$broadcast('afkl.lazyImage.destroyed'); allthough this seem hacky there is no real problemsolver in angular 1.x maybe for 2 :-)

[AlgusDark]

Yeah, I cache an array "$scope.images" and everytime that I change pages, "$scope.images" has the correct array. It really seems hacky the other solution, so I think that I'm going to update everytime my "$scope.images" in the controller. The real work of changing pages in my real app is because one page tells to the controller what kind of filter is going to be applied.

It didn't seems right to me always update "$scope.images" with the same content, that doesn't have too much impact?

Thanks for the quick answer.