Как сделать ленивую загрузку без рывков при скролле?

Question

[Senseich]

Всем привет! Недавно впервые попробовал данную технологию и наверняка вопрос уже поднимался, но я впервые пробовал и заметил, что при прокрутке происходят мелкие рывки. Я так понимаю из=за того что изображения подгружаются по мере прокрутки и полоса скрола увеличивается. Пробовал скрипты jquery.lazy, b-lazy, но и там и там заметны они.
Как можно избавиться от этого? Может кто-то конкретно данными плагинами пользовался, любой совет господа )

Answer 1

[Exploding]

Ну очевидно же, что блоку, в который загрузится изображение нужно установить ширину и высоту, такую же как у изображения, которое будет загружено.

UPD.
Добавьте в свою lazy-функцию плавное изменение размера блока и "рывков" не будет... Да и вообще, сколько "экземпляров" задач, столько и вариантов решений

Comments

[Senseich]

Exploding, я думал об этом, а что если респонзив изображение?

[Exploding]

Senseich, Не знаю, где именно вы это будете использовать, но как правило это юзают в списках-простынях.
Просто используйте 1-2 формата (в смысле размера) соотношения сторон, типа: портрет и альбом. Или еще лучше 1 - альбом. Тогда и анализировать размеры не придется, и страница будет намного аккуратней выглядеть.
Ну по крайней мере я бы так сделал.

[Exploding]

Senseich, ну а если заморочиться, то можно перед сохранением страницы, пройтись по всем изображениям, аяксом вернуть размер каждого и указать как там уже вам нужно...
Но лучше 1 формат))

[Senseich]

Добавьте в свою lazy-функцию плавное изменение размера блока

А про какой блок вы говорите? В котором изображение находиться, от 0 до 100% )

[Exploding]

Senseich, ну да, про него...

от 0 до 100%

не понял это что за % такие?

[Senseich]

Exploding, вобще я так понял, что сводится к тому, что нужно заранее подготовить место под высоту изображения, я сейчас нашел в документации довольно интересно этот момент придумали) : dinbror.dk/blog/blazy/?ref=demo-page#Responsive

[Senseich]

Exploding,

не понял это что за % такие?

Ну, вы имели ввиду изменение высоты блока от нуля до 100% ? или я загнался )

[Senseich]

Никита Егоров, ну мне с размерами вычисление как то понятнее, чем соотношение сторон )

[Exploding]

Senseich, ну в любом случае, будь то css-класс или data-атрибуты, или еще что-то диковинное - эти данные нужно знать заранее, а как их узнать и когда именно - выбирайте уже сами:)

[Exploding]

Senseich, зачем от нуля? Разве у вас возможен вариант изображения с нулевой высотой?)))

[Senseich]

Exploding, Возможно я что-то не так понял )

[Exploding]

Senseich,

Возможно я что-то не так понял )

Да не имеет значения, делайте как сделаете, а там по мере возникновения вопросов и решать их лучше:)

Answer 2

[Никита Егоров]

Если изображение не имеет высоты, то можно указать его пропорцию и вычислять высоту, примерно вот так - https://jsfiddle.net/Svupol/emucw18g/16/

Comments

[Exploding]

А пропорцию как узнать? Уж не из размеров ли?))

[Никита Егоров]

Exploding, размеры хоть высчитывать не надо. Просто указал например 1920:1080 (16:9) и все

[Senseich]

Ну да, как то странно, от куда я узнаю, что это 16*9 )

[Никита Егоров]

Senseich, свойства изображения

[Exploding]

Никита Егоров, какие свойства изображения?

[Никита Егоров]

Exploding, выбираете изображение в папке, жмете свойства и там разрешение

[Exploding]

Никита Егоров, ааа, вот вы о чем...