Strange data-bg problem

[wondergitluda]

I have a strange problem. Images with <img> tag are lazy loaded correctly, any other "bg" solution doesn't work.

Laravel blade code

<div id="app">
<img class="lazy" data-src="https://via.placeholder.com/220x280?text=Img+01" />
<a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+01"></a>
</div>

App.js

import Vue from 'vue'
import LazyLoad from 'vanilla-lazyload'

const app = new Vue({
  el: '#app',
  mounted () {
    this.lazyLoad = new LazyLoad({
      class_loaded: 'lazy-loaded',
      class_loading: 'lazy-loading',
      cancel_on_exit: true,
      use_native: true,
      callback_enter: (el)=>{console.log("Entered", el)}
    });
  }
})

Package.json

"devDependencies": {
   "axios": "^0.19",
   "cross-env": "^7.0",
   "laravel-mix": "^5.0.1",
   "laravel-mix-tailwind": "^0.1.1",
   "laravel-mix-vue-svgicon": "^3.0.1",
   "lodash": "^4.17.19",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.4",
     "tailwindcss": "^1.9.6",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.6.12"
},
"dependencies": {
    "dotenv-webpack": "^5.0.0",
     "heroicons": "^0.4.2",
     "vanilla-lazyload": "^15.2.0",
     "vuex": "^3.5.1",
 }

Any idea?

[verlok]

I see you're using an older version of LazyLoad. Have you tried the latest one? The documentation on the GitHub repo is related to the latest version.

[wondergitluda]

Updating the code to "vanilla-lazyload": "^17.1.3" everything is fine now. Thanx

[verlok]

Hey @ItsLhoudini, I’m glad you solved!

If you’re happy with my support, the documentation and the effort I’ve been putting on this project in the latest years, I hope you might want to buy me a coffee to show your appreciation.

Open-source software is great for everyone, but it takes passion and time to grow and evolve.

Thank you for thinking about it.

Have a nice day!