How to lazy load images in Framework7 with AngularJS

Note: This article has been written for Framework7 v1 and Angular 1.x

So, you’re using Framework7 with Angular and you enabled lazy load feature as described in the docs but it doesn’t work, eh? :)

Well, that’s no wonder if you bound the image url’s via data binding like this:

The reason for this is that the url to the image is not set as plain text in the data-src attribute. Instead, it is bound via Angular to a javascript variable. The problem here is that F7 does not know this and tries to set the string ‘{{imgurl}}’ as the url to the image which of course doesn’t work.

The solution to fix lazy load

So, the solution to this is to let Angular handle lazy load of images instead of using F7’s built-in mechanism. To do this you need to download an additional module for Angular. This one did a good job for me: https://github.com/Pentiado/angular-lazy-img

1) Add it to your project:

2) Then, import the module into your app:

var angularApp = angular.module('angularApp', ['angularLazyImg']);

3) As a next step, modify the html img tag (use lazy-img attribute instead of data-src and also remove “lazy” class):

4) Lastly, you need to check if a user has scrolled and then trigger lazy load feature. So, in your controller do this:

Dom7('.page-content').on("scroll", function () {
  $rootScope.$emit('lazyImg:refresh');
});

That’s pretty much it.

Demo app

• Working live demo
• Full demo source code on Github

Happy coding.