Prevent images and videos to load before the page is fully loaded even if they are on screen

[Julien-ELKAD]

Hi guys,

I'm pretty new using vanilla-lazyload and this is awesome !
However, I have a small problem, when I use Google PageSpeedInsights, I can clearly see that my video and images that are visible on the screen on page load are being loaded by the lazyload even though the page is not done loading.

Here is my code which is located in a js script file with defer attribute :
document.addEventListener('DOMContentLoaded', () => { var lazyLoadInstance = new LazyLoad(); });

I do not understand why it does not wait for the page is fully loaded. Can someone help me please?

[verlok]

Hey @Julien-FLEXY,
thanks for reaching out.

Could you also post the HTML code you’re using for your images?

[Julien-ELKAD]

Thank you for your answer!

Of course, here it is :

<video data-src="{{ block.settings.video_link }}" preload="none" class="slideshow__background-media lazy" autoplay playsinline muted loop> <source data-src="{{ block.settings.video_link }}" type="video/mp4"> </video>

The {{ }} tags are used because I'm on Shopify using liquid but this basically just add the right path to the media.
Also, I don't know if it is relevant but it is inside a swiperjs slider

Everything is working greatly just the medias visible on screen are loaded too soon and it's decreasing my PageSpeedInsight score unfortunately

[verlok]

Thank you,
could you please show me the code of the video as it is rendered in the HTML page?

[Julien-ELKAD]

Of course :
<video data-src="https://cdn.shopify.com/videos/c/o/v/949c8a444ca.mp4" preload="none" class="slideshow__background-media lazy entered loaded" autoplay="" playsinline="" muted="" loop="" data-ll-status="loaded" src="https://cdn.shopify.com/videos/c/o/v/949c8a444ca.mp4"> <source data-src="https://cdn.shopify.com/videos/c/o/v/949c8a444ca.mp4" type="video/mp4" src="https://cdn.shopify.com/videos/c/o/v/949c8a444ca.mp4"> </video>

[verlok]

Thank you.
What you posted is the DOM representation of the video tag as you find it in the elements tab of the browser’s developer tools.
What I am interested in is video tag in the HTML source of the page, the one that you can see by doing “view source” in the browser.
It should be similar to what you posted, except that you wouldn’t have lazy load attributes added.
Is that something that you have or is the DOM generated by JavaScript?

[Julien-ELKAD]

Hi verlok :)

This is what was generated in the DOM (I just changed the id of the media in the file url because I don't want to display this media in public even though nothing is really private ahah).
I think everything is set properly because the media is displayed well just it starts too soon. Do you think using a setTilmeout of 1ms before initializing the lazyload can help?