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

128
11 июля 2019, 12:50

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

Answer 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; 
  } 
}
<button class="submit">Send file</button>

READ ALSO
Создание правильной иерархии в БД для каталога сотрудников

Создание правильной иерархии в БД для каталога сотрудников

Cуть создать каталог для большего кол-ва сотрудников

138
Как найти разницу между 2 числами

Как найти разницу между 2 числами

Цель: выбрать записи в приоритете с большей разницей между tableball и table

142
Нестандартный вывод постов из WP_Query

Нестандартный вывод постов из WP_Query

Сейчас есть страница с отдельным шаблоном где выводятся посты из Custom post type FILMS в следвиде:

151
AJAX загрузка контента с другой страницы

AJAX загрузка контента с другой страницы

Не загружает контент другой страницыПодскажите в чем причина? выводит FIND = undefined

142