Есть сайт, где очень много фотографий на каждой странице, и загрузка каждой страницы занимает кучу времени, уже фотки все оптимизированы максимально. Но все равно этого не хватает. Есть интересные решение в виде lazy load. Но они, как я понимаю, прогружают при попадании картинки во вьюпорт... А есть ли решение,чтобы прогрузилась первые 100vh, и уже начинала грузиться нижнее 100vh, ты делаешь скрол, грузиться третья 100 vh, в то время когда твой vision на стадии 200vh низ, и т.д.? Чтобы добавленная анимация на те блоки работала безупречно.
Алекс Глебов, https://codepen.io/imagekit_io/embed/gdbYwV/
глянь пример пожалуйста, вот нужно что то в этом роде, только анимация библиотечная (aos) не работает вместе. плюс для сео не очень хорошо не иметь src атрибута. А как работает нативный lazy?? не по тому же принципу случайно?
Алекс Глебов, слушай, я протестил, да дествительно принцип видимо тот же, спасибо огромное и работает все идеально!!! и скорость загрузки упала просто в 7 раз))
Алекс Глебов, а нет, не идеально((( прицнип тот же, а вот анимация не работает))) как быть, использую библеотку AOS https://github.com/michalsnik/aos/issues/407
не могу разобраться, прикол в том что первые 500vh она работает, а потом перестает анимироваться...
Алекс Глебов, меня глючит? она начинает нормально работать, а потом в середине она тупо уже прогруженные картинки без всякой анимации появляются, но когда ты поднял вверх, и опустил вниз в середние скрола она о чудо работает. А если тупо вниз листаешь то спустя какое то время она перстает работать, обрати внимание
В точку. Вот и проблема и решение одновременно) спасибо огромное!) Но я хз, почему то мне помогло другое решение, может я уже сплю, может и вправду)
Тупо
document.querySelectorAll('img')
.forEach((img) =>
img.addEventListener('load', () =>
AOS.refresh()
)
);
прикол в том, что у меня разные размеры и картинки, и возможно при непонятном скроле и ошибки в самом скроле, так скажем, аос начинал сбиваться и где то прогружал уже заведдомо не видимые файлы.. Это помогло, тем что при загрузки картинки, он обновлял скрипт аоса и все четко)
Простой
Простой
Средний
