Атрибут loading тега <iframe>
Описание
Атрибут loading определяет стратегию загрузки содержимого элемента <iframe>. Позволяет отложить загрузку фреймов, которые находятся за пределами видимой области страницы (lazy loading).
<iframe
src="https://example.com/widget"
loading="lazy"
width="600"
height="400">
</iframe>
Доступные значения:
| Значение | Описание | Когда использовать |
|---|---|---|
eager |
Загрузить фрейм сразу (по умолчанию) | Для важного контента в видимой области |
lazy |
Отложить загрузку до приближения к области просмотра | Для фреймов ниже fold (вне начального экрана) |
Оптимизация производительности:
<!-- Основной контент загружается сразу -->
<iframe
src="important-chart.html"
loading="eager"
width="100%"
height="300">
</iframe>
<!-- Второстепенные виджеты загружаются лениво -->
<iframe
src="secondary-widget.html"
loading="lazy"
width="100%"
height="400">
</iframe>
Рекомендации по использованию:
- Используйте
loading="lazy"для фреймов ниже fold - Не применяйте lazy loading к фреймам в видимой области
- Сочетайте с
widthиheightдля стабильного layout - Для критически важного контента используйте
eager
Определение поддержки в браузере:
<script>
if ('loading' in HTMLIFrameElement.prototype) {
console.log('Браузер поддерживает lazy loading для iframes');
} else {
console.log('Требуется полифил для lazy loading');
}
</script>
Полифил для старых браузеров:
<iframe
src="placeholder.html"
data-src="real-content.html"
loading="lazy"
width="300"
height="200"
id="lazy-iframe">
</iframe>
<script>
if (!('loading' in HTMLIFrameElement.prototype)) {
const lazyIframes = document.querySelectorAll('iframe[loading="lazy"]');
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const iframe = entry.target;
iframe.src = iframe.dataset.src;
io.unobserve(iframe);
}
});
});
lazyIframes.forEach(iframe => io.observe(iframe));
}
</script>
Ограничения и совместимость:
- Поддерживается в Chrome, Edge, Firefox и Safari (с версии 15.4)
- В IE не поддерживается (требуется полифил)
- Не влияет на вложенные iframes (работает только для верхнего уровня)
- Порог срабатывания lazy loading зависит от браузера
Примечание: Атрибут loading особенно полезен для страниц с множеством iframes (виджеты, рекламные блоки, медиа-контент). Правильное использование может значительно улучшить производительность страницы и сократить потребление трафика.