Image Lazy Loading - Directive

ionic-v1
1

Hi,

I have adapted two directives to make lazy loading of images only when they are in user view.

I have a doubt, what is the best way to get de “scrollEvent”? in this case i created a directive named ‘scrollador’ that’s listen the scroll event on then broadcast the event to directive image-lazy-src.

2

What you can do is similar to this demo

3

Hi Pavei - can you share your directive? I’d love to see it. Thanks! - rajat

4

Sure!

7 Likes
5

Thanks! Very kind of you.

6

A nice addition would be to display a spinner while the image loads

1 Like
7

Thanks for this, really great!

Totally agree with @mhartington though, a spinner would class it up a little for sure!

8

I just want to say thank you.

Had to change the directives quit a lot to get them to work how I wanted - but this gave me a great base and I appreciate it.

(One change that I did that others would find useful is that the check for in view - I would test against the top of the image that is scrolling up - rather than the bottom edge - so the image load start is slightly earlier on a scroll)

9

Would you mind posting your version of the code, alexb? Thanks!

10

@alexb please send a pull request!

Thanks

11

Can’t really do that as it was very specific to my needs

a) One of my changes related to how I do images (3 layers - memory cache, local storage on device, remote web database) - so that was interesting to incorporate

b) On my cards (which are full width images) - I had to set a minimum height in CSS - because this directive was running when the card was 1 pixel high - so would make a lot of cards seem like they were in view rather than just 3 or 4. min-height: 200px fixed that ( although slightly different on tablet to phone due to how scaling works)

c) I removed the width check in the directive - as sometimes ionic returns the usable area as -1 - which meant it never looked like it was in view (as 0 and above was in view). Looks like the directive was created for 2 way scrolling, rather than up down scrolling?

d) Loading image src="{{image_from_lazy || loading.jpg}}" is a simple way of doing that - pulls in the loading image first then replaces it with the file that has just been found.

Anyways, thats what I did! Everything custom code, but the above should give a hint

12

Hi everyone,

I’ve actually made some cool changes to Pavei’s awesome image lazy load directive to fit my needs:

  • Possibility to have a ionic spinner while the image load
  • Added 2 parameters to specify a distance from the bottom and right of the screen where the image will start loading
  • Possibility to use a background-image instead of an image element.

Pavei has merged it in his code so it’s available here: https://github.com/paveisistemas/ionic-image-lazy-load

Here is a demo:

See the Pen Thumbnail List - With Lazy Image Loading by Michel Vidailhet (@mvidailhet) on CodePen.

Hope you’ll find it useful.

Cheers!

2 Likes
13

your codepen example does not work, its not loading image.

14

Hi! Thanks for the update. I actually did some tests and forgot codepen saved automatically. It’s working now. I just removed image-lazy-background-image and put an img tag instead of the div

15

I would say , that after using that piece of code. List performance get worst and it doesn’t load image if there is just one item in the list.

16

how to check whether the image is fully loaded or not ?