Почему в MODX 2.8 после data-src появляется белый квадрат

При использовании атрибута data-src для ленивой загрузки изображений в MODX 2.8 вы можете столкнуться с проблемой: вместо картинки отображается белый квадрат. Это типичная ситуация, связанная с отсутствием резервного атрибута src или некорректной работой скрипта lazy loading. Разберём причины и способы исправления.

Основные причины белого квадрата

Белый квадрат появляется, когда браузер не может определить, что отображать вместо загружаемого изображения. Основные факторы:

• Отсутствие атрибута src - браузер требует хотя бы один источник для отображения. Если src пуст или удалён, появляется пустой блок.
• Некорректный скрипт lazy loading - библиотека не заменяет data-src на src при прокрутке.
• Конфликт с кешированием MODX - системный кеш может блокировать обновление атрибутов.

Как исправить: пошаговая инструкция

1. Добавьте резервный src

Укажите в атрибуте src прозрачный placeholder (например, data:image/svg+xml,...) или миниатюру. Пример:

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E" data-src="/assets/images/photo.jpg" alt="Фото">

2. Проверьте скрипт ленивой загрузки

Убедитесь, что JavaScript обрабатывает data-src и заменяет его на src. Для MODX 2.8 рекомендуем использовать стандартный плагин pdoTools или библиотеку lazysizes. Пример инициализации:

document.addEventListener('DOMContentLoaded', function() { var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]')); if ('IntersectionObserver' in window) { let observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { let img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); lazyImages.forEach(function(img) { observer.observe(img); }); } });

3. Очистите кеш MODX

Иногда проблема вызвана старыми версиями страниц в системном кеше. Зайдите в админку: Система → Очистить кеш (или нажмите Ctrl+F5).

Продвинутые решения

Если базовые методы не помогли, проверьте настройки редактора. В MODX 2.8 встроенный редактор TinyMCE может автоматически удалять data-src. Отключите фильтрацию атрибутов в конфигурации редактора или используйте плейсхолдеры MODX для вставки изображений.

Профилактика проблемы

• Всегда задавайте src с placeholder.
• Используйте проверенные библиотеки lazy loading (например, lazysizes).
• Обновляйте MODX до последней версии 2.8.x.

Следуя этим рекомендациям, вы избавитесь от белого квадрата и настроите корректную ленивую загрузку изображений на сайте под управлением MODX 2.8.