How to use events for Lazy Load

Questions
1

What am I doing wrong?
I want to tap into the events of .lazy images (the following doesn’t log anything)…

<template>
  <div class="page">
    <img class="lazy lazy-fade-in" src="image.jpg" />
  </div>
</template>

<script>
  return {
    data: function () {
    },
    methods: {
    },
    on: {
      lazyLoad: function (el) {
        console.log(el);
      },
      lazyLoaded: function (el) {
        console.log(el);
      },
      lazyError: function (el) {
        console.log(el);
      },
    }
  }
</script>

Thanks.

2

I’m no expert in lazy load images, but I notice the documentation has ‘lazyEl’ instead of your ‘el’, if that helps.

3

Ok thanks, I tried your suggestion but the name of the parameter would not make a difference.
It must have something to do with where I’m listening for the event.?

4

Looks like you need the event handler within the app initialisation
http://framework7.io/docs/events.html

5

Yep tried that too. Not getting anything.

6

Try something like:

var app = new Framework7({
  ...
  on: {
    lazyLoad: function (lazyEl) {
      // do something
    }
  },
});
7

Router component “on” can be used only for router page events, you need to assign these events in usual way

8

I still cannot get it to trigger. I’m now trying this?

<script>
  return {
    data: function () {
    },
    methods: {
      onLazyLoaded: function (lazyEl) {
        console.log('lazyLoaded!');
        console.log(lazyEl);
      },
    },
    created: function() {
      var self = this, app = self.$app;
      app.on('lazyLoaded', self.onLazyLoaded);
    },
    beforeDestroy: function() {
      var self = this, app = self.$app;
      app.off('lazyLoaded', self.onLazyLoaded);
    },
  }
</script>
9

I’ve also tried this:

on: {
  pageInit: function() {
    var self = this, app = self.$app;
    app.lazy.create('img.lazy');
    $$('img.lazy').on('loaded', function (el) {
      console.log(el);
    });
}

I’m clearly just being stupid, please advise.

1 Like
10

I was being stupid!! I didn’t set the image src correctly!

I had :

<img src="path/to/image.jpg" class="lazy">

But what I needed was :

<img data-src="path/to/image.jpg" class="lazy">

Sorry :roll_eyes:

1 Like