HTML ограничивает загрузку изображений одновременно

Question

Я ищу лучшее решение для загрузки изображения дросселя в приложении SPA.

Проблема:

В медленной сети при входе на страницу сведений происходит много загрузок изображений, которые достигают максимумаподключения к браузеру, который прерывает (делает не отвечающим) пользовательский интерфейс, который требует подключения для выполнения запроса AJAX по нажатию кнопки.

Я ищу какой-либо HTTP / API-интерфейс браузера для ограничения загрузки изображений в данный момент времени. Знаете ли вы, что что-то подобное существует?

Другой подход, который я хотел бы использовать, - это возможность убить все запросы GET по нажатию кнопки (это также может решить эту проблему).

Я не могу найтитакие API. Может быть, было бы неплохо вставить эти изображения как «prefetch»?

Или мне нужно «лениво» загрузить эти изображения как <img data-src="url">, а затем поместить их в пользовательский сборщик, который одновременно выполняет до 3 запросов?

РЕДАКТИРОВАТЬ: обнаружены некоторые связанные проблемы:

• javascript: отменить все виды запросов
• Как прервать изображение загрузка запросов без использования window.stop ()

Answer 1

1. Лучше всего использовать модуль отложенной загрузки / библиотеку вашей SPA Framework. Например, эта библиотека для React, похоже, широко используется: https://github.com/twobin/react-lazyload. Я бы с уверенностью воспользовался этим подходом.
2. Создайте ленивый загрузчик изображений самостоятельно. Вставьте изображение-заполнитель (или изображение низкого качества), которое затем замените на окончательное изображение.
3. Да. Параллельные загрузки на домен ограничены. Но вы можете создать второй Домен (= Субдомен), где вы разместите свои изображения, чтобы это могло эффективно увеличить количество параллельных загрузок. (Но, конечно, не общая полоса).
4. Предварительная загрузка: просто как примечание: если у вас большое приложение с множеством навигационных путей / экранов, это может быть пустой тратой ресурсов, если вы загружаете изображения страниц (или раздел страницы) пользователя, тогдане буду посещать ... Я бы не стал этого делать, так как мобильный трафик довольно дорогой!
5. Посмотрите на атрибут "Важность" img. Тег: важность Указывает относительную важность загрузки ресурса. Может это поможет? Но никогда не использовал это раньше ...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

importance 
Indicates the relative download importance of the resource. Priority hints allow the values:
auto: no preference. The browser may use its own heuristics to prioritize the image.

high: the image is of high priority.

low: the image is of low priority.