Native image lazy loading possible?

Hi,

we are trying to get native lazy image loading () to work together with vue.js but are struggling. What we are experiencing is that when vue.js mounts, the native image loading stops working all together. Is this even possible to get working with vue.js? Example below html below, if we simply comment out the vue script part where we start vue works fine in supported browsers (chrome, Edge(ium) and Firefox), but triggering vuejs breaks native image loading. We want to use native image loading instead of scripts as it is faster in our tests and we do not need to modify img tags or make data-src attribute workarounds.

<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
	<div id="vuetest">
		<div>VUEBUG: {{ message }}</div>
		<div>
			<p><img alt="lowres" itemprop="image" width="300" height="200" src="https://source.unsplash.com/random" loading="lazy"></p>
                        .... lots of images here ...
                 </div>
          </div>
<script>
		var app = new Vue({
			el: '#vuetest',
			data: {
				message: 'lazy loading tests'
			}
		});
	</script>

</body>
</html>

What are you referring to when you say “native image loading”? Vue doesn’t do anything to load images. This is all handled by the browser. Might be good to provide a jsfiddle replicating your issue because if I drop your code into one myself the image loads as expected.

https://jsfiddle.net/jamesbrndwgn/x64ks53f/1/

Yeah, sorry forgot a crucial word in there “native lazy image loading”, the html example is still valid. Notice the loading=lazy in the img tag. That is the part that is not working when vue is involved.

Updated the original post to be more precise.

I’m not 100% sure how the browser handles preparing images for lazy loading, but if it relies on the source to be present (meaning the body content) then that could be an issue - though it looks like the lazy attribute works with React based on this issue.

Could be worth filing a bug report on Vue’s github.

If you use a very simple component to render img tags with loading=lazy it works just fine in vue. But outside of a component in raw html but inside a mounted app it wont work, so must be something with how vue handles it, will try to dig into the source code to see if there is a workaround or it needs special handling like in the react example you posted.

1 Like

Hi, it’s help you if you use Vue,
Vue.directive(‘lazyload’, {
inserted: el => {
if(el.tagName == ‘IMG’) {
el.src = el.dataset.src;
}
}
})

, but your tag img must be < img v-lazyload data-src="" />

did you ever find a solution for this issue? i’m in the same boat here…