Руководство о том, как проверить, загружено ли фоновое изображение на страницу с помощью JavaScript.
Иногда мы хотим проверить, загружено ли фоновое изображение с помощью JavaScript.
В этой статье мы рассмотрим, как проверить, загружается ли фоновое изображение на страницу с помощью JavaScript.
Слушайте событие загрузки
Мы можем прослушать событие load фонового изображения, чтобы узнать, загружено ли оно.
Если он загружен, мы можем установить фоновое изображение на изображение с тем же URL-адресом, что и фоновое изображение.
Например, мы можем написать:
const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
const bgElement = document.querySelector("body");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;
preloaderImg.addEventListener('load', (event) => {
bgElement.style.backgroundImage = `url(${imageUrl})`;
preloaderImg = null;
});
У нас есть imageUrl с изображением, которое мы хотим загрузить в качестве фонового изображения.
Затем мы получаем элемент body с document.querySelector.
А затем мы создаем элемент preloaderImg с document.createElement с изображением, которое мы хотим предварительно загрузить.
Затем мы устанавливаем preloaderImg.src на imageUrl.
Затем мы вызываем addEventListener для preloaderImg с 'load' в качестве первого аргумента для отслеживания загрузки preloaderImg.
Обратный вызов запустится, когда он загрузится.
Итак, мы можем установить bgElement.style.backgroundImage, чтобы установить фоновое изображение на изображение, загруженное в элемент preloaderImg.
А затем мы устанавливаем preloaderImg на null, чтобы очистить предварительно загруженное изображение.
Теперь мы должны увидеть фоновое изображение, загруженное на нашу страницу.
Заключение
Мы можем прослушивать событие load элемента изображения, чтобы узнать, загружено ли изображение.
Затем, когда оно загружено, мы можем использовать URL-адрес предварительно загруженного изображения, чтобы установить фоновое изображение страницы.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
