Introduction

A few days ago I encountered a problem with a scrollable list I was developing for my app. On my phone, the list would be very laggy while loading the images of the next items. For me, it was not possible to let this kind of bad user experience in my app.

So I started to look for a way to lazy load the images of my list and load only the images once they were going to be displayed on the screen. That's how I found this great directive that was really simple and had the basic things I needed. It worked great out of the box, but I needed some additional features to get the best out of it. So I made the changes I needed and sent a pull request to Vinicius, who was really nice and kindly merged it.

The example

So without further blabla, here is a working example of how you can use this awesome directive:

Note:I've deliberately set the image-lazy-distance-from-bottom-to-load to a negative value to show you how the loader looks like. Put to a positive value to load the image before it is displayed
Easy right? And the scrolling is now less laggy when images load, as the images don't load all at the same time! Neat!

Features I've added

For my list I needed to have my images loaded as background-images to be able to use background-size: cover; background-position: center; css styles. So I updated the code to do that. You can now lazy load your background-images too: