HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop() — cancel</title>
</head>
<body>
  <h1>Cancel pending images</h1>
  <p>
    <button type="button" id="stopBtn">Stop loading images</button>
  </p>
  <pre id="status">Loading images… click Stop to cancel.</pre>
  <p id="gallery"></p>
  <script>
    (function () {
      var gallery = document.getElementById("gallery");
      var status = document.getElementById("status");
      var bust = Date.now();
      var i;

      for (i = 0; i < 6; i++) {
        var img = document.createElement("img");
        img.alt = "Sample " + (i + 1);
        img.width = 200;
        img.height = 120;
        img.src = "https://picsum.photos/seed/" + (bust + i) + "/200/120";
        gallery.appendChild(img);
        gallery.appendChild(document.createElement("br"));
      }

      document.getElementById("stopBtn").onclick = function () {
        window.stop();
        status.textContent = "Loading stopped — some images may be missing.";
      };
    })();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript Window stop() — cancel button (Try It)