Lazy Loading images in scroll list

ionic-v1
1

Does anybody have any recommendations/direction/advice on how to lazy load images in ionic? I have an image based app and I’d like to delay loading of images until they are in view.

Any help greatly appreciated.

2 Likes
2

How will an image be “in view”? When a page is navigated to? When a button is pressed? When something is swiped?

Right now, unless Angular needs to render an image, it will NOT load an image. Once you navigate to a page or do something that causes that image to load, Angular will load it. So, you already have lazy loading.

Or, do you mean it’s way down the view “out of sight” and don’t want it loaded unless the user scrolls down to it?

3

Sorry, should clarify…

On a long scrolling list, images that are below the view that aren’t in view down below in the list…

I’d like to prevent those from rendering for faster performance, and then the load when they are scrolled into view. Along the lines of:
http://toddmotto.com/labs/echo/

4

I could have seen the subject and understood better as well.

Have you seen this :

5

You could also try this directive: http://ngmodules.org/modules/rn-lazy

6

Do you mean generate new list items instead of detecting when they come into view? That way the images load as the rows get generated.

7

Yes I suppose that would as well. I’m working from a simple rest service that return 15 items at once, and want to load items in whatever is the most efficient

8

Do we need to de-activate the image after it has been out of the view while user scrolling up?

9

Has anyone been successful implementing this? It uses jQuery which i don’t really need. The problematic lines I am struggling to adapt are:

 // Listen for window changes.
  win.on( "resize.bnLazySrc", windowChanged );
  win.on( "scroll.bnLazySrc", windowChanged );
10

I too had trouble integrating Ben Nadel’s AngularJS solution.

However, a quick search on Ionic Forums on “lazy loading” gives multiple working solutions!

Here’s one: Image Lazy Loading - Directive

Cheers to the Ionic Forum!

1 Like