如何显示成千上万的不同背景图像答案

【问题标题】：How to Display Thousands/Millions of different background images如何显示成千上万的不同背景图像
【发布时间】：2018-10-12 16:35:29
【问题描述】：

如何让网页加载数千甚至数百万张不同的图片作为 HTML 背景，而不会崩溃或减慢浏览器的速度？

图像可以动态创建，也可以链接到其文件夹。我可以为每个画布制作多达 1000 张图片，并添加更多的画布，但在 30 张画布上，即浏览器停止响应的 30,000 张图片（速度较慢）。

仅供参考：图像必须同时显示。

<html>
 <body>
      <script>
      var cInt=0;
      var loopCInt=0;
      while (loopCInt<3){
       var canvasName = document.createElement("canvas");
       canvasName.setAttribute('width', "1000");
       canvasName.setAttribute('height', "1000");
       var canvasIdName="myCanvas"+cInt;
       canvasName.setAttribute('id', canvasIdName);
       document.body.appendChild(canvasName);
        var c = document.getElementById(canvasIdName);
        var ctx = c.getContext("2d");
        var i = 0;
        var right=0;
        var tops=0;
        var goDown=0;
        while (i <= 1000) {
          ctx.beginPath();
          ctx.rect(right, goDown, 30, 30);
          ctx.fillStyle = '#'+Math.random().toString(16).slice(-6);
          ctx.fill();
          i++;
          right=right+30;
          tops++;
          if (tops==30){
            goDown=goDown+30;
            right=0;
            tops=0;
          }
        }

      loopCInt++;
      cInt++;
    }
</script>
</body>
</html>

【问题讨论】：

你不能，但你可以尝试通过调整它们的大小并将它们与在线工具结合起来，将它们作为一个图像加载；如果你让它一次加载这么多图像，服务器将会崩溃。
我是说你应该尽可能多地融合，这样你才能达到你的终极目标100万
你是在尝试 DDoS 还是什么？另外，“不减慢浏览器的速度”？你不需要代码，你需要一台来自 NASA 的计算机。
xD D.Pardal 你就知道了。
使用 WebGL 并跳过 Canvas2D。也不要垃圾邮件超过你需要的画布。也不要在面向公众的网站上这样做。

标签： javascript html performance canvas

【解决方案1】：

很难加载 1000 张图片，但如果您需要经常更改的背景。您可以为图像编号（1 到 1000）。然后使用javascript随机选择10张图片。在这种情况下，访问者将在每个会话中看到 10 个不同的背景。

【讨论】：