How to disable link rel="preload" on responsive?

Question

I work with Link rel="preload" for slideshow images to make my website faster, at least in a browser. I created a rule for not showing the slideshow on a phone ( display:none; ). As the preload links are in the head of my index.html, images are preloaded even on a phone. Is there a way to disable this preload when we are on responsive?

I created a rule for not showing the slideshow on a phone ( display:none; ).

Answer 1

You can add a media attribution to preload:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">

This is well supported in browsers.