javascript - 网页中的多个不同背景

Question

我有数百万张照片，我想将它们全部渲染为马赛克/同时以网格形式设置为网页背景。我如何使用 javascript、jquery 或任何网络技术实现它，而不会导致浏览器崩溃或变慢？

我尝试过的:

1. 旨在动态创建数百万个 span，并将每张图片设置为一个 span 的背景:当它达到 60,000 个 span 时，它会减慢计算机速度。
2. 尝试过使用 Div/Tables，性能比 span 还差。
3. 由于可以使用 javascript 动态创建图片，所以我决定在 Canvas 上绘制每张图片，并尽可能多地绘制 Canvas ，但仍然很慢。

Answer 1

你真的需要一次显示 60,000 张图片吗，因为我无法想象任何人都能一次看到所有 60,000 张图片。

我会做的是:

1 - 为 5*5 的背景生成一个网格/跨度布局(或者你想一次显示多少张图片)；

2 - 在服务器上创建一个文件夹，其中包含所有可以使用的图像，并使用数字递增的文件名，例如“0.png”“1.png”“2.png”“3.png”等。

3 - 如果您不需要在用户查看页面时更改图片，并且您只会在用户(重新)加载页面时更改图片，您可以在服务器上编写代码它生成一个介于 0 - 最大文件数 (-1) 之间的随机数。在该数字后面添加“.png”并将该文件设置为跨度的背景。

3- 如果您希望图片在用户查看页面时发生变化，您需要编写一个 javascript 代码，它会生成一个介于 0 - 最大文件数 (-1) 之间的随机数。添加“.png”并将跨度的背景更改为该文件名。现在每 x 秒重复一次这个函数。

这将阻止创建 60.000 个跨度，这肯定会降低浏览器的速度。您也不受任何约束。