Как в lazysizes загрузить все изображения после 2 секунд?

Question

[Cheizer]

Приветствую друзья, делаю ленивую загрузку изображений на странице, использую библиотеку lazysizes Скрипт вызываю в начале страницы

<script>
        (function(){
    window.lazySizesConfig = {
      lazyClass: 'lazy',
      loadMode: 1,
    };
    document.addEventListener('lazybeforeunveil', function(e){
      var bg = e.target.getAttribute('data-bg');
      if(bg){
          e.target.style.backgroundImage = 'url(' + bg + ')';
      }
    });
    })();
      </script>

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

Answer 1

[Ilia Malashko]

Просто оберните в setTimeout

...
var bg = e.target.getAttribute('data-bg');
      if(bg){
         setTimeout(() => {
          e.target.style.backgroundImage = 'url(' + bg + ')';
          }, 2000)
      }
...

Так же можно всю функцию обернуть, в зависимости от того какой результат вы ожидаете
Я надеюсь вы в курсе что сеошники вас побьют если узнают что вы такое учидили с картинками

Comments

[Cheizer]

но так ничего не получиться, просто скрипт запуститься через 2 секунды, и будет работать как и раньше, картинки появятся когда я до них докручу

[Ilia Malashko]

А понял. Ну тогда так:

window.onload = function() {
    setTimeout(() => {
    document.querySelectorAll('[data-bg]').forEach(e => {
        var bg = e.getAttribute('data-bg');
        if(bg){
            e.style.backgroundImage = 'url(' + bg + ')';
        }
    });
    }, 2000)
};

И еще, var устарел (

[Ilia Malashko]

Ilia Malashko, ну и за место getAttribute('data-bg') можно использовать dataset.bg

[Cheizer]

Ilia Malashko, нет, так вообще не работает, и параметры скрипта не включены, в них суть, смотрю в настройках https://github.com/aFarkas/lazysizes/blob/gh-pages... есть trottledelay параметр, но это все равно не то

Вот код без лишнего
<script>
        (function(){
    window.lazySizesConfig = {
      lazyClass: 'lazy',
      loadMode: 1,
    };
    })();
      </script>

window.lazySizesConfig = {
lazyClass: 'lazy',
loadMode: 1,
};

[Ilia Malashko]

Cheizer, я с этой библиотекой не работал, я вам показал принцип как отложить выполнение скрипта.
Вы же понимаете принцип работы setTimeout()?
Вам необходимо просто обернуть функцию которая должна выполняться с задержкой в setTimeout().

В моем примере я не использовал эту библиотеку, этот скрипт должен работать и без нее.

[Cheizer]

Ilia Malashko, понял, благодарю, про setTimeout() знаю, но он тут не сработает