Image Lazy Loading - Directive


#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.


Lazy Loading images in scroll list
#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!


#5

Thanks! Very kind of you.


#6

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


#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!


#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 ?