document.images — усі зображення сторінки в JavaScript

Загальний опис

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, і застосовувати до кожного зображення необхідні стилі або обгортки. Це дозволить вам контролювати відображення зображень без необхідності жорсткої прив'язки до структури HTML.

автор: Bond правити

Порада

Використання document.images може слугувати для оптимізації завантаження зображень шляхом додавання або зміни їхніх атрибутів loading="lazy", що дозволить зображенням завантажуватися лише тоді, коли вони потрапляють у видиму область екрану. Це підвищує загальну продуктивність веб-сторінки, зменшуючи час завантаження.

автор: Bond правити

Порада

Для моніторингу стану завантаження зображень на сторінці, ви можете використовувати document.images разом з подіями load та error, присвоєними кожному зображенню. Це дозволяє реалізувати користувацькі повідомлення або анімації, що сповіщають про успішне завантаження або помилки, забезпечуючи кращий досвід користувача.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.images

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	61	4	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	61	3.2

Приклади

+ запропонувати свій приклад у пісочниці

// Функція для зміни джерела всіх зображень на сторінці
function changeAllImagesSource(newSrc) {
  for (var i = 0; i < document.images.length; i++) {
    document.images[i].src = newSrc;
  }
}

// Виклик функції із новим джерелом зображення
changeAllImagesSource('https://example.com/new-image.jpg');

<header>
  <h2 class="title">Document.images Property</h2>
  <p class="description">Дозволяє отримувати доступ до всіх зображень на сторінці.</p>
</header>
<main>
  <div class="result">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='155' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 1">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='154' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E" alt="Зображення 2" style="display:none;">
    <button onclick="toggleImages()">Переключити зображення</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function toggleImages() {
  var images = document.images;
  for (var i = 0; i < images.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    images[i].style.display = images[i].style.display === 'none' ? '' : 'none';
  }window.CP.exitedLoop(0);
}
//# sourceURL=pen.js

// Підрахунок та виведення кількості зображень на сторінці
var imagesCount = document.images.length;
console.log('Кількість зображень на сторінці: ', imagesCount);