LazyLoading изображения с динамическими вкладками?

Question

Я пытаюсь ленить загружать изображения с динамическими вкладками. Мой код в основном это с изображениями в вкладке: w3school

И я использую lazyload library (Я тоже пробовал других, не повезло).

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

$("img.lazy").lazyload({ 
    skip_invisible : true 
}); 

И он работает, но только при срабатывании прокрутки 1px +. Любые идеи или обходные пути? Я пытаюсь обходным путем внедрить прослушиватель для onclick навигационных вкладок, но он не работает, потому что Думаю, вкладка не обновилась до вызова триггера прокрутки. Или есть ли лучшая альтернатива этому для динамических вкладок?

Answer 1

Использование lazysizes. Этот lazyloader автоматически обнаруживает изменения видимости для текущих и будущих элементов img.

Просто включите скрипт, добавьте класс lazyload и используйте data-src вместо src.

Answer 2

Я бы не использовал плагин lazysizes, потому что у него сотни строк кода только для изображения, ленивой загрузки. Я думаю, что в вашем случае вы можете использовать микроплагин, такой как justlazy. Это without jQuery, очень легкий и эффективный.

Во-первых, вы должны определить, вы заполнители изображения (в данном примере кода для вкладки № 1):

<span data-src="path/to/image1" data-alt="alt" data-title="title" 
 
     class="image-placeholder-tab-1"> 
 
</span> 
 
<span data-src="path/to/image2" data-alt="alt2" data-title="title2" 
 
     class="image-placeholder-tab-1"> 
 
</span>

Также можно использовать IMG-тег, чтобы быть более SEO дружелюбный. Затем вы должны установить низкую качественную версию изображения как значение атрибута src. Другой вариант - использовать атрибут srcset для реагирующих изображений (см. demo).

Второй шаг - загрузить изображения при открытии конкретной вкладки. Поэтому библиотека имеет гибкий способ загрузки изображений через пользовательские события.

Чтобы сделать это легко, просто добавьте следующий код для кнопок вкладки:

// e.g. for tab 1 
 
Justlazy.lazyLoad("image-placeholder-tab-1");