如何在加载页面时触发缓存文件？

Posted 2023-05-09

【中文标题】如何在加载页面时触发缓存文件？

【英文标题】：How to trigger caching a file upon loading of the page?

【发布时间】：2021-08-30 21:09:27

【问题描述】：

我有一个库存物品搜索工具，可以过滤巨大的 json 文件（大约 8mb），如果找到物品，它只会以卡片格式显示有关该物品的所有信息。

所以现在当我加载页面时，只有在我开始在页面的输入框中输入字符时才会开始缓存 8mb 文件。

如何更改此行为并在加载页面时缓存文件并将 json 对象传递给“get_item”函数，以便在我开始输入字符后立即匹配项目。

我尝试使用 DOMContent.onload 和其他各种 onload 触发器，但没有运气:(

请帮忙。

这是js代码：

const match_items = document.getElementById('match_items');

const get_item = async input_text => 
    const inventory_file = await fetch('/static/json/inventory_cookware_2020.json');
    const inventory_json = await inventory_file.json();

    let item_matches = inventory_json.filter(item => 
       const regex = new RegExp(`^$input_text$`, 'gi');
       return item.match(regex);
    );

    if (input_text.length < 10)
        item_matches = [];
        match_item.innerhtml = '';

    

    display_item_data(item_matches);
;

function display_item_data(item_matches)

code to display item data...

search.addEventListener('input', () => get_item(search.value)); ```





HTML--------------------------------------

   <div id="input_box">
        
        <input type="search" id="search" placeholder="Search Inventory">

   </div>

<div id="match_item"></div>

【参考方案1】：

要在第一次访问页面时启动 JSON 文件的 fetch，请将以下代码添加到开头。这使用 IIFE（立即调用函数表达式）在页面首次加载时获取和填充数据。在文件完成加载之前，search 输入被禁用。

let inventory_json;
const search = document.getElementById('search');
search.addEventListener('input', () => get_item(search.value));

(async () => 
  const inventory = await fetch('/static/json/inventory_cookware_2020.json');
  inventory_json = await inventory_file.json();
  search.disabled = false;
)();

const match_items = document.getElementById('match_items');

const get_item = input_text => 
  // This ensures the function won't run until the AJAX is complete
  // and inventory_json is populated
  if (!is_loaded) 
    return;
  

  let item_matches = inventory_json.filter(item => 
    const regex = new RegExp(`^$input_text$`, 'gi');
    return item.match(regex);
  );

  if (input_text.length < 10)
    item_matches = [];
    match_item.innerHTML = '';
  

  display_item_data(item_matches);
;

HTML
<input type="text" id="search" placeholder="Search Inventory" disabled />

【讨论】：

您好先生，有没有办法我们可以将加载器添加到“if (!is_loaded) return;”，加载器将继续加载直到条件为真

在 json 文件加载之前禁用search 输入如何？这意味着get_item 函数在文件加载之前不会运行。让我知道，如果合适，我可以更新答案。

是的，这会起作用，所以剩下的就是找到一个加载器解决方案来显示，直到调用 get_item 函数

答案已更新。例如，您可以在页面加载时显示 CSS 加载器微调器，然后在 search.disabled = false 所在的位置也隐藏此加载器。

您好先生，我认为 search.disabled 不起作用