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

Question

[Алексей Коваль]

Как реализовать ленивую загрузку контента как на Хабре?

Answer 1

[profesor08]

Ключевые слова для гугла: lazy loading js

Браузеры могут поддерживать отложенную загрузку, для ознакомления почитай тут, есть примеры и разжевано: https://web.dev/native-lazy-loading

Для тех-же картинок можно задать какой-то background, а для загрузки статей по ajax, придется заморочиться созданием заглушки в виде красивых пустых строк, как на твоем скриншоте, которая заменится как только необходимые данные загрузятся.

Comments

[Otrivin]

Познавательно, не знал о фиче

Answer 2

[xmoonlight]

1. lazyload
2. includeHTML.

Comments

[Otrivin]

А как быть с CMS?

[posters]

Otrivin, использовать плагины/не использовать CMS

[xmoonlight]

Otrivin, Создать шаблон

[profesor08]

Самый простой способ

и самый бесполезный, вообще никак не решает задачу.

[xmoonlight]

profesor08, почему не решает?

[profesor08]

xmoonlight, а почему должен решать?

[xmoonlight]

profesor08, ок. это все аргументы?

[profesor08]

xmoonlight, мне интересно мнение создателя, так как тут никак не реализован механизм lazy loading, так вот повторю вопрос, почему должна решать?

[xmoonlight]

profesor08, потому, что либа может загружать ресурсы html/js/css как в упорядоченном режиме, так и произвольном: асинхронно. И всё это - по любому событию.

[profesor08]

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

[xmoonlight]

profesor08, если она ничем не отличается от fetch, а может больше, чем fetch (включая рекурсию: блок грузим из блока и т.д.), значит она уже лучше. ИМХО.

[profesor08]

xmoonlight, да пусть хоть чай наливает, lazy loading она не выполняет, а значит бесполезная.

[xmoonlight]

profesor08, ок: я дал возможность выбрать.

Answer 3

[Ihor Bratukh]

Skeleton loading + ajax