Lazy loading of images

[Novi Border]

Hi,

I am trying to learn angular, and I dont know how to approach this..
How would one go about lazy loading of images..
Like having many images on one page, all having some default src,
and then on scroll (and on init) computing which images are visible and
loading their actual image (changing src)...

If I render the list of normal  images is trivial with ng-repeat and ng-src.
I suppose there should be a directive which would change the dom
to set the proper 'src' attributes (maybe ng-lazy-src?). But how to do
this in colaboration with timer and window scrollTop and height properties. Then
it should update the images on visible elements, but once loaded it should not
'unload' them again...

hmm..

Maybe it could be done in $viewContentLoaded event, but i suppose it will have its
own problems with rerendering...

Any pointers?
NB

[Dan Doyon]

have you tried using ngSrc? http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngSrc

seems like you could assign a placeholder image (like LinkedIn does) and then update the expression as you need to.

--dan

---

From: Novi Border <novib...@gmail.com>
To: ang...@googlegroups.com
Sent: Tuesday, May 22, 2012 10:06 AM
Subject: [angular.js] Lazy loading of images

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/7ZBPeMLcDesJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Novi Border]

Of course:) this part would work nicely,
but I don't quite understand how to integrate it with the timer (in a directive, like in my-current-time directive sample in the docs..?)
For example I would not like to add a timer and directive per image, but rather have one 'outer' directive which would check
all the inner nodes.. maybe reading the source of a few directives will help...

NB

[Renan T. Fernandes]

maybe creating a directive that test if itself is visible and when true it replace the src of element with a specified

<img src="/default.png" lazy-src="/foo/bar.png" />

lazy-src bind do scroll event of parent/window and when it is inside of de visible area, it replace src with the value of lazy-src

2012/5/22 Novi Border <novib...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/oF4acbOuZzkJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
Renan Fernandes(aka "ShadowBelmolve")

[Julien Bouquillon]

Hi 

I created the rn-lazy directive which will help you :

 - display an image loader while loading, OR a custom DOM (for CSS animated loaders)

 - switch CSS classes automatically

https://github.com/revolunet/rn-lazy

Would be nice to have your comments :)

Julien