<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Проверка загрузки изображений с помощью JavaScript

Проверка загрузки изображений с помощью JavaScript

Новички много раз уже слышали, что прежде чем загрузить изображения на сайт, то нужно их как следует сжать. Поскольку не оптимизированная графика больших размеров весит много, то и времени на ее загрузку требуется тоже больше. Как же узнать и где можно посмотреть, загрузились картинки на сайт или нет.

Эксперимент

Для эксперимента, вставим несколько картинок большого размера на страницу. Правильнее сказать, не сами картинки, а всего лишь ссылки на них, со стороннего бесплатного ресурса pixabay.

<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094_1280.jpg" alt="">
<img src="https://cdn.pixabay.com/photo/2014/09/07/21/52/city-438393_1280.jpg" alt="">
<img src=https://cdn.pixabay.com/photo/2014/07/01/12/35/taxi-381233_1280.jpg"" alt="">

Получаем картинки на странице по тегу img. Создадим переменную imgInterval для функции setInterval. Метод setInterval запускает одинаковые действия через равные промежутки времени. У элементов есть свойство complete, которое принимает два значения (true или false). Когда элемент загружен на страницу, свойство complete возвращает true. В противном случае, если элемент не загружен - возвращает false.


// JavaScript код

// Получение картинок и запись их в переменную
let images = document.querySelectorAll('img');

// Объявление переменной и присваивание ей результат работы функции
let imageInterval = setInterval(() => {
// Вывод в консоли состояние свойства complete для каждой картинки
    console.log('image 1 ' + images[0].complete);
    console.log('image 2 ' + images[1].complete);
    console.log('image 3 ' + images[2].complete);
// Создаем условие для очистки работы метода setInterval
    if (images[0].complete && images[1].complete && images[2].complete) {
// Очищаем переменную imageInterval
        clearInterval(imageInterval);
    }
}, 50)

Через каждые 50 миллисекунд функция будет проверять состояние свойства complete по отношению к картинкам. После прохода по всем индексам, работу функции следует принудительно закончить с помощью метода clearInterval. В поисках информации насчет загрузки картинок, обратимся к непосредственному участнику данного процесса, к консоли отладчика браузера Chrome. Если свойство complete вернуло true, значит все картинки загрузились.


Проверка загрузки изображений с помощью JavaScript.

Свойство complete - это один из самых простых способов узнать, загрузились картинки на сайт или нет. Кроме того, можно узнать время загрузки каждого файла, перейдя во вкладку Network.

Вкладка Network

Вкладка Network позволяет отследить время загрузки файлов. На скриншоте, вы видите, что наши картинки в среднем загрузились за 100 миллисекунд.


Проверка загрузки изображений с помощью JavaScript.

Если вы хотите с головой погрузиться в интересный мир языка JavaScript, то не пропустите мой видеокурс по JavaScript. Без преувеличения можно сказать, что это самый востребованный язык программирования в мире. JavaScript нужно знать абсолютно каждому верстальщику, не говоря уже о начинающем frontend-разработчике.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.