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

Question: Promise when -all- images are loaded #14

Closed michaelrachlitz closed 9 years ago

michaelrachlitz commented 9 years ago

Hi,

I have a project where I would like to display a preloader on the page until all images and AJAX requests have been fully loaded.

Is there already a feature or a modification I could make (maybe a broadcast) that could help me achieve this easily with ng-lazy-image?

Sorry if this in an inapropriate forum to ask this question.

Kindly, Michael

SquadraCorse commented 9 years ago

So you actually don't lazy load them but while giving loading state? If so a simpler directive can be made i think. I can add broadcasting but then the directive itself should know if it is part of a group...

Let me think about it.

michaelrachlitz commented 9 years ago

Hey SandraCorse,

Exactly. Images needs to be grouped. I actually use the option {"nolazy": true}, as I don't want the images to lazy load when visible to the window, but rather load them as a group. I am not sure wether this directive is the correct one to use. But grouping them and having the broadcast as a hook would be a powerful directive. Not necessarely something ng-lazy-image should support though, I dont know.

Thanks for looking into it and getting back to me this fast.

SquadraCorse commented 9 years ago

Do you use multiple sources, or single one per image? Does it need to do checks when resizing? Best setup would be making your own with an instance holding every added url and on every image loaded/errored it takes it from it until it's empty and then emits. So then you can take some parts of this directive and customize on your own needs. If i have time i can make a sample.

michaelrachlitz commented 9 years ago

Hi SquadraCorse (sorry I mispelled your name earlier)

Would be really cool with a sample. I load several collections of images.

ProductService, gets (among other informations) an object containing several images. VariantService, gets objects containing several images. ProductListService, gets objects containing several images.

I would like to load the collections of images from all services together, and display the full page when this is a succes. The resize on browser change is not important. But I do like the fact that I can provide a mobile with an image that is lower resolution to save bandwidth.

I would really appreciate a sample if you have the time.

Again thanks a lot for getting back to me so quickly.

SquadraCorse commented 9 years ago

See if latest addition is workable for you. You can have your own directive doing calculation which images got loaded state. Maybe you need error state as well? See console log http://afklm.github.io/ng-lazy-image when image is loaded: 'done', if it fails 'fail'. You can use fiddler to return 404 on image request and see both values.