JS властивість Document.images
Загальний опис
Document.images є властивістю, яка надає доступ до колекції усіх зображень (<img> елементів), присутніх у поточному документі HTML. Використовуючи цю властивість, розробники можуть легко отримати доступ до зображень на сторінці для читання або модифікації їх властивостей, таких як src, alt, розміри та інші. Ця властивість є чудовим інструментом для оптимізації завантаження зображень, застосування динамічних змін до зображень або для аналітики та контролю зображень на сторінці.
Використання Document.images вельми просте, але в той же час відкриває широкі можливості для маніпуляції з зображеннями. Коли ви звертаєтесь до document.images, ви отримуєте HTMLCollection об'єкт, який містить список усіх зображень на сторінці. Цей об'єкт можна перебирати, як масив, для доступу до окремих зображень.
Ось приклад, як ви можете використовувати Document.images для виведення адрес усіх зображень на сторінці:
for (let i = 0; i < document.images.length; i++) {
console.log(document.images[i].src);
}
Цей код перебирає колекцію зображень та виводить їхні адреси (src атрибути) у консоль. Це може бути корисно для аналізу використовуваних зображень або для перевірки правильності їх підключення.
Для динамічної зміни атрибутів зображення, наприклад, заміни джерела зображення, можна використати наступний код:
document.images[0].src = 'new-image.jpg';
Цей приклад змінює джерело першого зображення в документі на нове. Такий підхід можна використовувати для динамічної зміни зображень відповідно до дій користувача або інших умов.
Ще один цікавий спосіб застосування Document.images - це перевірка розмірів зображень на сторінці. Наприклад, ви можете перевірити, чи є зображення занадто великими для оптимального завантаження сторінки:
for (let img of document.images) {
if (img.naturalWidth > 1920) {
console.log(img.src + " is too wide");
}
}
Цей код перевіряє кожне зображення в документі на предмет того, чи перевищує його природна ширина 1920 пікселів, що може вказувати на потребу оптимізації для покращення продуктивності завантаження сторінки.
| Порада: | Для створення галереї зображень, яка завантажується динамічно, ви можете перебирати колекцію, повернуту |
| Порада: | Використання |
| Порада: | Для моніторингу стану завантаження зображень на сторінці, ви можете використовувати |
Синтаксис
Document.imagesЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми створюємо два зображення, які спочатку показують лише одне з них, а друге приховано. Функція toggleImages() перебирає всі зображення на сторінці, використовуючи властивість document.images, і перемикає їх відображення з "показати" на "приховати" і навпаки. Це демонструє можливість динамічного керування вмістом сторінки за допомогою JavaScript, забезпечуючи інтерактивний досвід для користувачів.
У цьому прикладі ми демонструємо базове використання властивості document.images для підрахунку кількості зображень, що присутні на веб-сторінці. Цей метод є корисним для аналізу вмісту сторінки, зокрема для веб-розробників, які бажають оптимізувати завантаження сторінок шляхом мінімізації кількості зображень або для проведення аудиту контенту.
// Підрахунок та виведення кількості зображень на сторінці
var imagesCount = document.images.length;
console.log('Кількість зображень на сторінці: ', imagesCount);У цьому складнішому прикладі ми використовуємо властивість document.images для динамічної зміни джерел (src) усіх зображень на сторінці. Це може бути корисно у ситуаціях, коли потрібно тимчасово змінити візуальний контент, наприклад, для демонстрації тематичних оформлень або при проведенні тестування інтерфейсу користувача.
// Функція для зміни джерела всіх зображень на сторінці
function changeAllImagesSource(newSrc) {
for (var i = 0; i < document.images.length; i++) {
document.images[i].src = newSrc;
}
}
// Виклик функції із новим джерелом зображення
changeAllImagesSource('https://example.com/new-image.jpg');