Как сделать lazy-load нормально(async load)?

Question

[kot2566]

Пытаюсь сделать отложенную загрузку GIF с помощью библиотеки vanila-lazyload, но проблема в том, что браузер всё ещё ждёт загрузки этой gif (индикатор загрузки крутится.
При этом библиотека верно срабатывает, заменяя data-src на src.
Если сделать инициализацию библиотеки с задержкой (SetTimeout), то работает, как будто, правильно.
Как сделать нормально, чтобы загрузка страницы не зависела от загрузки gif?

<div class="img_container">
        <img class="lazy" data-src="https://cdn.akamai.steamstatic.com/steam/apps/1245620/extras/ER_Steam_Gif_616x260.gif?t=1639598512" alt="">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.5.0/dist/lazyload.min.js"></script>

    <script>
 var lazyLoadInstance = new LazyLoad({
            });

/*
        setTimeout(function () {
            var lazyLoadInstance = new LazyLoad({
            });
        }, 2000);
*/
    </script>

Без SetTimeout:
https://kepo4ka.github.io/lazy_load/index.html

C SetTimeout:
https://kepo4ka.github.io/lazy_load/index1.html

Не особо важно когда гифка начнёт отображаться для пользователя, главное, чтобы она не тормозила саму страницу

Comments

[Alex Karo]

Не совсем по теме:
Нативная поддержка ещё не оч =(
https://caniuse.com/loading-lazy-attr

[kot2566]

Alex Karo, Изначально было с этим атрибутом, но не подходит, так как gif-ка должна отображаться сразу на первом экране, в видимой области экрана.

Атрибут loading элемента (или loading (en-US) атрибут для (en-US)) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.

Answer 1

[Надим]

Попробуй делать запуск после того, как страница готова к работе, а не сразу сходу. Пример:

document.addEventListener('DOMContentLoaded', function() {
    var lazyLoadInstance = new LazyLoad({});
});

Comments

[kot2566]

Нет, не помогло.

На боевом сервере подключение скрипта с атрибутом defer и запуск внутри $('document.ready'). То есть происходит позже DOMContentLoaded и всё равно нет.
Не могу настройку в библиотеке, чтобы она работала как хочу, но не только по скроллингу.

[Надим]

kot2566, а можно фото этого индикатора?

индикатор загрузки крутится

Потому что если речь идет об индикаторе слева от адресной строки браузера, то его по идее можно остановить вручную используя document.close()

document.addEventListener('DOMContentLoaded', function() {
    document.close();
    var lazyLoadInstance = new LazyLoad({});
});

Answer 2

[Alex Karo]

Что если выкинуть эту библиотеку и самому заменять картинку?
1) Размещаем на странице div с class=lazy и data-src
2) По setTimeout кладем в него img и меняем класс
3) Красиво все это стилизуем css

Comments

[kot2566]

Я надеялся, что есть готовое надёжное решение.
Я не понимаю, зачем мы вынуждены использовать SetTimeout, если мы делаем операции по замене внутри, например, $(document).ready( ?
Почему SetTimeout с задержкой 10мс не срабатывает как ожидается (как будто многопоток)?

$(document).ready(function () {
     // способ 1
    $("img[async-src]").each(function (index) {
        // $(this).attr("src", $(this).attr("async-src"));
        
        setTimeout(function () {
            $(this).attr("src", $(this).attr("async-src"));
        }, 5000);
    });

    // способ 2
    $("img[async-src]").each(function (index) {
        let self = $(this).parent();
        let src = $(this).attr("async-src");

        setTimeout(function () {
           
            var img = new Image();

            img.onload = function () {
                self.append(img)
            };
            img.src = src;
        }, 5000);

    });
  });

Как высчитать оптимальное значение задержки для SetTimeout?

[Alex Karo]

Почему SetTimeout с задержкой 10мс не срабатывает как ожидается (как будто многопоток)?

А ожидается - это когда?
Можно пример, что идет не так?

Думаю, стоит все таки привязаться не к таймаутам, а к событиями
Например, начинать грузить тяжелые файлы после загрузки других картинок/ассетов - по событию load
https://learn.javascript.ru/onload-ondomcontentloaded

[kot2566]

Идёт не так то, что браузер ждёт загрузку гифок, даже если я привязываюсь к событию ondomcontentloaded.
НО если я оборачиваю это в SetTimeout, то браузер думает, что загрузил страницу полностью (хотя гифки ещё не загрузились). То есть как надо.

И pagespeed тоже видит эти гифки, снижая индекс производительности.
Мне нужно, чтобы сперва страница прогрузилась и отдельно Независимо грузились гифки, не влияя на скорость всего остального, но без settimeout.
ПРИМЕРЫ:
1) Как вы говорите (просто на событие ondomcontentloaded)
kot256x3.beget.tech/index1.html
PageSpeed 1
PageSpeed "палит" мои гифки


2) Вместе с SetTimeout 4 секунды:
kot256x3.beget.tech/index2.html
PageSpeed 2

Поэтому видно, что привязка к этому событию недостаточна. Не знаю какое другое событие можно использовать.
Приходится использовать таймаут, но опять вопрос почему это так работает и как высчитать оптимальный размер?

Возможно, я неправильно что-то сделал при тесте, заранее извиняюсь.

[Alex Karo]

Я предлагал не по DOMContentLoaded, а по load