bLazy image lazyloading not working in combination with ionic2

Question

I am currently trying to use the bLazy lazy loading script in combination with angular2 and ionic2.

Using the javascript by itself only with HTML works like a charm and as expected:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.6.2/blazy.min.js"></script>
</head>
<body>
<script>
    // Example
    var bLazy = new Blazy({
        src: 'blazy-data' // Default is data-src
    });
</script>

<style>
    .b-lazy {
        -webkit-transition: opacity 500ms ease-in-out;
        -moz-transition: opacity 500ms ease-in-out;
        -o-transition: opacity 500ms ease-in-out;
        transition: opacity 500ms ease-in-out;
        max-width: 100%;
        opacity: 0;
    }
    .b-lazy.b-loaded {
        opacity: 1;
    }
    .imgbg {
        background-color:#b0b0b0;
        max-width: 400px;
        padding: 2px;
        border-color: #fff;
        border-style: solid;
    }
</style>

<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/abstract" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/fashion" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/city" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/sports" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/people" border="1" width="400" height="400" /></div>

</body>
</html>

This one shows the placeholders for images being lazy loaded, and as soon as they come into the viewport, the get loaded and shown. (Same code as jsfiddle here)

When using the same DIVs inside an ionic2 app, the lazy loading does not work. Please note that I already use the mechanism mentioned in the documentation about using bLazy with angular.

It simply does not load the images after first initialization. So I thought it might be a timing problem, but even when using a button to call the revalidate method of bLazy, it only loads the images inside the viewport, all other images are ignored.

Please check this plunkr for an example: https://plnkr.co/edit/5LoBQ389PQv4AlBTlbjw?p=preview

Does anybody know a workaround for this or how to correctly use bLazy together with ionic2?

Thanks in advance.

score 1 · Accepted Answer · answered Jul 22 '16 at 11:07

You have two problems here:

1) If you don't specify the container, bLazy only listens to the scroll event on window - in this case you need it to listen to the scroll event on scroll-content.

2) There is something weird going on with the timing. I'm not a 100% sure what and why, but the solution below solves it.

/* ... */

export class HomePage {

  /* ... */

  ionViewLoaded() {
    this.bLazy = new Blazy({ 
      src: 'blazy-data', // Default is data-src
      container: 'scroll-content'
    });
  }

  ionViewDidEnter() {
    this.bLazy.revalidate();
  }

  constructor(private nav: NavController) {
  }

  /* ... */

}

ionViewLoaded and ionViewDidEnter are Ionic 2 Lifecycle events.

The way I see it, ionViewLoaded should theoretically suffice, as it is called when the page is ready. But since it somehow it doesn't, we simply revalidate bLazy becomes the active page.

Thanks for that solution! It really seems to work. I only had to take care of the fact that the lifecycle event names got changed from beta7 to beta8, thats why it didn't work first hand. The second thing is that sometimes i need a little timeout of 300ms before revalidating the bLazy stuff, but then it works! — Olli, Jul 23 '16 at 17:05

bLazy image lazyloading not working in combination with ionic2

1 Answers1