Переключатель табов с поддержкой LazyLoad

[Mr. Bot 26]

В DLE наконец то появился LazyLoad из коробки, всё бы ничего, но использование его и табов, делает неприятный баг в виде необходимости малейшего скролла, для прогрузки изображений. Есть вот такой вот код, который исправляет данный недочёт, но он работает лишь для одного изображения в контейнере таба, может кто то подправит код для поддержки неограниченного числа изображений.
Понимаю что нужно в цикле пройтись по всем img, но знаний в JS не хватает.

 

$('.tabs-sel').on('click', 'span:not(.current)', function() {
	$(this).addClass('current').siblings().removeClass('current').parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(0);
	tab_content = $(this).parents('.tabs-box').find('.tabs-b').eq($(this).index()).find('[data-src]');
	if(tab_content) {
		tab_content_src = tab_content.data('src');
		tab_content.attr('src', tab_content_src);
		tab_content.removeAttr('data-src');
	}
});

 

[alukardua 27]

6 часов назад, Mr. Bot сказал:

В DLE наконец то появился LazyLoad из коробки, всё бы ничего, но использование его и табов, делает неприятный баг в виде необходимости малейшего скролла, для прогрузки изображений. Есть вот такой вот код, который исправляет данный недочёт, но он работает лишь для одного изображения в контейнере таба, может кто то подправит код для поддержки неограниченного числа изображений.
Понимаю что нужно в цикле пройтись по всем img, но знаний в JS не хватает.

 

$('.tabs-sel').on('click', 'span:not(.current)', function() {
	$(this).addClass('current').siblings().removeClass('current').parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(0);
	tab_content = $(this).parents('.tabs-box').find('.tabs-b').eq($(this).index()).find('[data-src]');
	if(tab_content) {
		tab_content_src = tab_content.data('src');
		tab_content.attr('src', tab_content_src);
		tab_content.removeAttr('data-src');
	}
});

 

вот например у меня правда не из коробки

document.addEventListener("DOMContentLoaded", function () {
    var lazyloadImages;

    if ("IntersectionObserver" in window) {
        lazyloadImages = document.querySelectorAll(".lazy");
        var imageObserver = new IntersectionObserver(function (entries, observer) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    var image = entry.target;
                    image.src = image.dataset.src;
                    image.classList.remove("lazy");
                    imageObserver.unobserve(image);
                }
            });
        });

        lazyloadImages.forEach(function (image) {
            imageObserver.observe(image);
        });
    } else {
        var lazyloadThrottleTimeout;
        lazyloadImages = document.querySelectorAll(".lazy");

        function lazyload() {
            if (lazyloadThrottleTimeout) {
                clearTimeout(lazyloadThrottleTimeout);
            }

            lazyloadThrottleTimeout = setTimeout(function () {
                var scrollTop = window.pageYOffset;
                lazyloadImages.forEach(function (img) {
                    if (img.offsetTop < (window.innerHeight + scrollTop)) {
                        img.src = img.dataset.src;
                        img.classList.remove('lazy');
                    }
                });
                if (lazyloadImages.length == 0) {
                    document.removeEventListener("scroll", lazyload);
                    window.removeEventListener("resize", lazyload);
                    window.removeEventListener("orientationChange", lazyload);
                }
            }, 20);
        }

        document.addEventListener("scroll", lazyload);
        window.addEventListener("resize", lazyload);
        window.addEventListener("orientationChange", lazyload);
    }

а так вот GIT тут и исходники и инструкции к LazyLoad

[Gameer 299]

29 минут назад, alukardua сказал:

вот например у меня правда не из коробки

а так вот GIT тут и исходники и инструкции к LazyLoad

Когда нибудь ты перестанешь флудить.

 

@Mr. Bot

$('[data-src]').lazyLoadXT();

 

[Mr. Bot 26]

В 05.08.2020 в 12:49, Gameer сказал:

Когда нибудь ты перестанешь флудить.

 

@Mr. Bot

$('[data-src]').lazyLoadXT();

 

Разве lazyLoadXT применит LZ для всего контейнера?

[Gameer 299]

3 минуты назад, Mr. Bot сказал:

Разве lazyLoadXT применит LZ для всего контейнера?

Укажите какой дом нужен и вызывайте при переключении таба.

[Mr. Bot 26]

В 08.08.2020 в 19:52, Gameer сказал:

Укажите какой дом нужен и вызывайте при переключении таба.

Можете показать пример? Не совсем понимаю как.
И lazyLoadXT() получается будет прогружать картинки только в области видимости таба же, и потом по мере скроллинга будет подгружать остальные в области видимости?