Иногда вам нужно обработать загрузку изображений на веб-страницы, и это будет хорошей идеей для обработки производительности на веб-сайте. Предположим, у вашего клиента нет быстрого подключения к интернету, а у вас на сайте много картинок… что произойдет? у них будет медленный сайт, и это негативный момент для вашего сайта.
Какое решение?
Например, вы можете использовать этот код для загрузки изображений по одному:
Несколько примечаний к приведенному выше коду:
Мы определили массив для хранения URL-адресов изображений и имеем самовызываемую функцию для выполнения нашей функции запуска. В функции-исполнителе у нас есть цикл по массиву URL-адресов, а затем мы вызываем theloadImageByPromise(url) с ожиданием для обработки промиса и добавляем прерывание для асинхронного запроса.
В промисе мы создаем тег изображения и устанавливаем для него src, а затем проверяем загруженное изображение методом onload и resolve обещанием. теперь после resolve у нас есть appendChild и мы можем добавить загруженное изображение в наш контейнер div элемент.
Чтобы легко это проверить, вы можете использовать функцию дросселирования на вкладке «Сеть» Dev-Tool, чтобы ограничить скорость вашего интернета и посмотреть результат.
Удачи.
