Question

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

我尝试过的事情：

旨在动态创建数百万个跨度并将每张图片设置为跨度的背景：计算机达到60,000跨度时会减慢计算机速度。
试图使用Div / Tables，其性能甚至比跨度还要差。
由于可以使用javascript动态创建图片，因此我决定将每张图片绘制在画布上，并绘制尽可能多的画布，但速度仍然很慢。

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个跨度，这肯定会降低浏览器的速度。同样，您也不受约束。

Answer 2

根据您的第三点， 可以使用javascript 动态创建图片。

因此，让我们首先考虑将其简单地绘制在画布上，而不是生成大量画布，而是生成一个画布，在其上绘制整个网格。

我们将存储实际生成图像所需的内容，而不是将每个图像存储为像素。最终它只是一堆坐标，如果运气好的话，我们将能够将其存储在形状足够相似的对象中，以便js引擎以最佳方式对其进行优化。

我们要做的就是计算这些图片中可以显示多少，将它们放置在网格中，并仅渲染实际可见的图片。（因为您极不可能一次渲染所有这些图片）。

listViewHolder.productStock.addTextChangedListener(new TextWatcher() { ... });

if (listViewHolder.productStockWatcher != null) {
    listViewHolder.productStock.removeTextChangedListener(productStockWatcher);
}

listViewHolder.productStockWatcher = new TextWatcher() { ... };
listViewHolder.productStock.addTextChangedListener(listViewHolder.productStockWatcher);

网页中的多个不同背景

2 个答案: