Question

我有一个自动完成搜索字段连接到MySQL数据库以检索值，它被编码为一个java游戏（它有项目ID，名称和图片）

已添加20,000件商品。它应该是一个查找，实际上，当你点击一个选项时，它会输出关于该项目的更多信息，比如它的游戏价格和描述等。

问题在于它滞后并且需要时间，因为有20,000张图片正在加载，我有点希望它能够显示图片，以便玩家可以更轻松地找到事物。我知道只要删除图片就不会滞后。

我想出的一个新想法是在开始搜索之前将最小字符设置为3，这是最小项目字母。这将有助于减少滞后，好像项目的名称是“派对帽”，玩家将需要写“标准杆”或其他什么，所以它只会加载100-500值，而不是只键入“a”并加载至少70-80％的值，因为大多数值包含“a”，或“swo”代表“剑”。

其他一些人建议压缩图片，但是对于20,000张图片，它们实际上是18mb，每张图片约1kb？

搜索字段仅加载结果的图片，因此如果您将网站保持打开状态1小时，则不会加载任何图像，因为服务器尚未拨打电话或请求加载特定图片。如果您键入内容，则会加载与搜索匹配的所有图像，这些图像都是结果。（100-1000或其他）

有任何建议或想法可以解决这个问题吗？

可以在这里找到它的外观示例..

Example 1

Example 2

感谢阅读！

Answer 1

优化此方法的方法是优先考虑下拉列表中首先出现的图像，即用户通常会看到的图像。您可以为从开始就预加载的所有情况渲染微调器。

当用户开始输入并从数据库接收记录时，您将微调器设置为所有项目的图像，然后加载前6个项目（例如）的图像（完成所有项目）（或如果用户滚动，你必须计算显示哪些项目（有图书馆），但如果所有项目都有相同的大小你可以通过滚动的百分比来完成，然后优先考虑这些。

大多数时候，用户不会立即滚动，因此用户体验将会大大改善。这是一个方便的构造，用于检查图像是否已加载：

const preloadImage = (imageSrc) => {
  return new Promise((resolve) => {
    if (!imageSrc) {
      resolve();
      return;
    }

    const img = new Image();

    img.src = imageSrc;
    img.onload = resolve;
    img.onerror = resolve;
  });
};

const preloadImages = (imagesSrc) => {
  return Promise.all(imagesSrc.map(preloadImage));
};

将最小值设置为3个字符是一个好主意，但您还应该debounce请求，例如，在请求服务器检查输入值是否更改之前等待500毫秒，以防万一用户仍在打字。

Javascript - 自动完成搜索

1 个答案: