Как загрузить файл заранее (предзагрузить) в браузере перед его фактической загрузкой?

Как называется технология, при которой файл сначала "предзагружается" на сайте, выводится модальное окно с кастомным лоадером и запрещается закрытие вкладки, а затем резко скачивается на устройство пользователя из браузера? Как правильно искать информацию об этой технологии в интернете?
  • 26 февраля 2024 г. 11:58
Ответы на вопрос 2
Для предзагрузки файла в браузере перед его фактической загрузкой можно использовать тег `<link>` с атрибутом `rel="preload"`. Например, для загрузки файла стилей CSS можно добавить следующий тег в секции `<head>` HTML документа:

```html
<link rel="preload" href="styles.css" as="style">
```

Что касается технологии, описанной во второй части вопроса, она называется "forced file download" или "заставленная загрузка файла". Для поиска информации об этой технологии в интернете можно использовать ключевые слова "forced file download web", "how to force download file from browser", "custom modal file download technique" и т. д. Также стоит обратить внимание на веб-разработческие форумы и специализированные ресурсы, где могут быть описаны подробности и примеры реализации данной технологии.
Ищите <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/fetch</a> <br/> Скачать в фоне потом отдать как blob.. <br/> если сервер настроен нормально, то уже в кэше браузера будет. <br/> <pre><code class="javascript">// set preloader active
fetch("big_file.zip", { cache: "force-cache" })
.then(response =&gt; {
     /*  close preloader */
    return response.blob()
})
.then(blob =&gt; {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
   //   .....
   // a.click()
  })
;</code></pre> <br/> <br/> Можно навороченнее решение поискать через <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/S...</a> Fetch aip + cache
Похожие вопросы