Not lazy loading I think

[NasuhGencaslan]

I want to use this module but i cant figure out how. I set this script as a dependency and add the module to my app.

<div class="col-xs-12 col-sm-6 col-md-4 " ng-repeat-start = "manga in sonuncu">
        <div class="row">
        <div class="col-md-6">
        <div afkl-lazy-image="//placehold.it/480x480 480w" 
class="afkl-lazy-wrapper thumbnail">

        <img ng-src="images/kapaklar/{{manga.seri}}.jpg">
        </div>

        </div>

        </div>
        </div>

[SquadraCorse]

Isbara, what is the image ratio (actually what are image width and height settings). That is needed for the container, since there is not really a lot in it else all containers will allready be in your viewport. So for that we need to add some css as well. For now to have it working:

<div class="col-xs-12 col-sm-6 col-md-4" ng-repeat-start= "manga in sonuncu">
    <div class="row">
        <div class="col-md-6">
            <div afkl-lazy-image="images/kapaklar/{{manga.seri}}.jpg" class="afkl-lazy-wrapper thumbnail"></div>
        </div>
    </div>
</div>

It is better to have complete image src in your model as well (so you only output this src), now you only have the name in it, it's ok but cleaner inside model.

[NasuhGencaslan]

@SquadraCorse Thank you for your answer. I added afkl-image-container to bootstrap main container which is coming after the body tag. There is certain image width and height. Bootstrap thumnail class determines it i think. You can look at my website see it. http://mangayurdu.com/

[SquadraCorse]

'afkl-image-container' directive is only needed when you have a scrollable container inside body. Since you scroll on body (normal behaviour) you don't need it. The className 'afkl-lazy-wrapper' is only used to prevent reflow, since the image is not there it will set height first to 0, and the correct image class should then use padding to give it correct height, but i noticed the images have not the same dimensions so you can not really use it. The concept about aspect ratio is explained here http://afklm.github.io/ng-lazy-image/

Try to look at gulp as well for building your static things into less files (improvement).

[SquadraCorse]

I see you removed the container, and images are lazy loading. If you need you can still look at the concept of aspect ratio to finetune how browser is building your containers.