Как сделать ленивую загрузку без рывков при скролле?
Всем привет! Недавно впервые попробовал данную технологию и наверняка вопрос уже поднимался, но я впервые пробовал и заметил, что при прокрутке происходят мелкие рывки. Я так понимаю из=за того что изображения подгружаются по мере прокрутки и полоса скрола увеличивается. Пробовал скрипты jquery.lazy, b-lazy, но и там и там заметны они.
Как можно избавиться от этого? Может кто-то конкретно данными плагинами пользовался, любой совет господа )
Ну очевидно же, что блоку, в который загрузится изображение нужно установить ширину и высоту, такую же как у изображения, которое будет загружено.
UPD.
Добавьте в свою lazy-функцию плавное изменение размера блока и "рывков" не будет... Да и вообще, сколько "экземпляров" задач, столько и вариантов решений
Senseich, Не знаю, где именно вы это будете использовать, но как правило это юзают в списках-простынях.
Просто используйте 1-2 формата (в смысле размера) соотношения сторон, типа: портрет и альбом. Или еще лучше 1 - альбом. Тогда и анализировать размеры не придется, и страница будет намного аккуратней выглядеть.
Ну по крайней мере я бы так сделал.
Senseich, ну а если заморочиться, то можно перед сохранением страницы, пройтись по всем изображениям, аяксом вернуть размер каждого и указать как там уже вам нужно...
Но лучше 1 формат))
Exploding, вобще я так понял, что сводится к тому, что нужно заранее подготовить место под высоту изображения, я сейчас нашел в документации довольно интересно этот момент придумали) : dinbror.dk/blog/blazy/?ref=demo-page#Responsive
Senseich, ну в любом случае, будь то css-класс или data-атрибуты, или еще что-то диковинное - эти данные нужно знать заранее, а как их узнать и когда именно - выбирайте уже сами:)