Как отложить закачку файлов на сервер, вернуть пользователю ответ и затем докачать эти файлы?

#javascript #php #jquery #ajax #laravel

Пытаюсь ускорить работу сайта с клиентом. Особенно тормоза проявляются при загрузке
пользователем файлов изображений на сайт, если скорость отдачи у юзера маленькая. Как
сделать, чтобы при отправке формы с файлами сервер сразу вернул true клиенту, а затем
докачал файлы, а пользователь в это время мог бы продолжать пользоваться сайтом. Использую
ajax. Сервер на laravel. Где такое можно реализовать: на сервере или на клиенте в js?
    

Ответы

Ответ 1

Это называется optimistic updates. Суть заключается в том чтобы пользовательский
интерфейс вел себя так, как будто изменение было успешно завершено до получения подтверждения
от сервера о том, что это было на самом деле. Тоесть он с оптимизмом ожидает, что в
конечном итоге получит подтверждение, а не ошибку.

Реализуется таким образом чтобы запрос отправлялся в фоновом режиме, а для пользователя
выглядело так как будто картинка уже загрузилась (показать галочку, или отобразить
картинку)



const buttonElement = document.getElementsByClassName("submit")[0];

const sendFileFunction = () => {
  buttonElement.classList.add("sending");
  
  // функционал по отправке запроса
  
  setTimeout(() => {
    buttonElement.classList.remove("sending");
    buttonElement.classList.add("success");
  }, 2000);
};

buttonElement.addEventListener("click", sendFileFunction);
.submit {
  border: none;
  background: none;
  box-shadow: 0 0 5px black;
  padding: 1em;
  cursor: pointer;
}

.submit.sending::after {
  content: "...";
  margin: 0 0 0 0.5em;
  animation: fadeInOut 0.8s infinite;
}

.submit.success::after {
  content: "✓";
  color: green;
  margin: 0 0 0 0.5em;
}

@keyframes fadeInOut {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}