Как сделать, что бы фото подгружались по мере появления на сайте и слайдера?

Question

[Nikita Shchypylov]

Всем привет

1)На проекте много фото jpeg'a, которые много весят и долго грузятся. Как сделать так, что бы они подгружались по мере скролла вниз?
2) Тут труднее. На сайте есть слайдер (bx-slider) с 92 li'шками(92 слайда с тяжелыми картинками). Как сделать в этом слайдере, что бы картинки, которые на li'шках подргружались по клику на следующий слайд?

Спасибо за помощь

Answer 1

[imhuman]

Оба случая одинаковы по сложности, да и по сути тоже, гуглите lazyload. Если вкратце, то на страницу загружаются множество img с одинаковым src(фон или индикатор какой-нибудь). В кастомном атрибуте, например, my-attr каждого изображения прописывается ссылка на настоящее изображение. И как только img становится видимым на клиентском экране происходит замена src с дефолтного значения на my-attr. Но тут уже чистая математика, пояснять нечего)

Answer 2

[zooks]

2) Заменить на Slick carousel, там встроена функция lazy loading.

Comments

[Nikita Shchypylov]

Это просто бомба
Спасибо огромное