Отключаем ленивую загрузку изображений (lazyload)

Почему это так работает?

В начальной загрузке изображения (или его плейсхолдер) используется значение data:image/gif;base64,... в атрибуте src, чтобы браузер мог отобразить минимальный прозрачный или пустой плейсхолдер. Затем библиотека заменяет его на физический путь, указанный в data-src, как только изображение попадает в видимую область.

Если у вас на сайте АСПРО включена настройка: Использовать "ленивую" (LazyLoad) подгрузку изображений (отображение только видимых картинок) и нужно ее отключить только для определенного блока на странице, можно поступить следующим образом:

Решение с JavaScript для класса .exclude-lazy img

Добавим код, который сразу устанавливает значение атрибута src для изображений, находящихся в контейнерах с классом .exclude-lazy, и исключает ленивую загрузку:

document.addEventListener("DOMContentLoaded", () => {
    const images = document.querySelectorAll(".exclude-lazy img.lazyload");
    images.forEach((img) => {
        if (img.dataset.src) {
            img.src = img.dataset.src;  // Устанавливаем src на основе data-src
            img.removeAttribute("data-src");  // Убираем атрибут data-src, если он больше не нужен
            img.classList.remove("lazyload");  // Убираем класс lazyload
        }
    });
});

Объяснение:

1. Поиск изображений: document.querySelectorAll(".exclude-lazy img.lazyload") — выбираем только изображения с классом .lazyload внутри контейнера с классом .exclude-lazy.
2. Замена src: Для каждого такого изображения мы заменяем атрибут src на значение data-src.
3. Удаление атрибутов: Убираем атрибут data-src и класс lazyload, чтобы отключить ленивую загрузку и сделать изображение обычным.

Этот код гарантирует, что изображения с классом exclude-lazy не будут подвержены ленивой загрузке и будут загружаться немедленно, используя их атрибут data-src.