DEV Community

loading...

Discussion on: Native lazy-loading of images with zero Javascript

Collapse
liukonen profile image
Luke Liukonen

I wish I could report how great it worked for me, and how I was able to remove another 3rd party dependency from my site. Unfortunately, Vue 2 just doesn't get it and loads the images anyway. I tested it out on a "basic" site and it worked fantastic, however, if you are running a "framework"... in my case, Vue.. mileage may vary

Collapse
madsstoumann profile image
Mads Stoumann

That's probably because parts of the DOM gets re-written. You could try <img data-src="your-image" loading="lazy" />, and then set img.src = img.dataset.src, when the component has been mounted in Vue.

Thread Thread
pfacklam profile image
Paul Facklam Author

Looks like a mixture from both worlds (see above in the article). As a disclaimer: I haven't give Vue.js a try. Should I? 🤔

Thread Thread
liukonen profile image
Luke Liukonen • Edited

Mads I might have to, thanks! I've been using a combination of Intersection observers, and a plugin, Vue.LazyLoad to handle the late binding of images on my page. It's just disappointing to see native HTML not render like you'd expect to see, but that might be one of the sacrifices you give up when using a framework.

Paul. Since Im just starting out with JS frameworks, I started with Vue. It is growing in popularity, however, React and Angular are still kings at this time.

Thread Thread
pfacklam profile image
Paul Facklam Author

Luke. I am very familiar with React, Angular and even Ember. But I haven't had the chance to look into Vue.js yet.