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.
I’m no expert in lazy load images, but I notice the documentation has ‘lazyEl’ instead of your ‘el’, if that helps.
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.?
Looks like you need the event handler within the app initialisation
http://framework7.io/docs/events.html
Yep tried that too. Not getting anything.
Try something like:
var app = new Framework7({
...
on: {
lazyLoad: function (lazyEl) {
// do something
}
},
});
Router component “on
” can be used only for router page events, you need to assign these events in usual way
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>
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
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 
1 Like