JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<body>
  <h1>Instructions:</h1>
  <ol>
    <li>Run this with cache enabled.</li>
    <li>Notice the Low Quality image loading on the first load</li>
    <li>Click the Button</li>
    <li>Notice the high quality loading in the network tabs</li>
    <li>Refresh and see that high quality is preferred</li>
    <li>Clear cache and try again</li>
  </ol>

  <picture>
    <source srcset="https://placehold.co/500x400?text=LowQuality 1x, https://placehold.co/500x400?text=HighQuality 10x">
    <img src="https://placehold.co/500x400?text=HighQuality" alt="Stuff" width="500" height="400">
  </picture>

  <button>Go To High Quality</button>

</body>

JavaScript

const button = document.querySelector('button');
      const source = document.querySelector('source');
      button.addEventListener('click', () => {
        console.log("loading high quality");
        // Remove the source and fallback to original image tag src
        source.parentElement.removeChild(source);
      });