Как на js в цикле выполнить первые 10 итераций, а последующие после того как пользователь начал скролить?

Question

[Андрей Федоров]

Пытаюсь ускорить сайт. Написал простенький lazyload, условно по событию `load` меняет у картинок атрибут data-scr на src. Однако, если картинок много это вызывает на медленных устройствах дополнительные тормоза - нужно ждать пока они все прогрузятся. Возникла мысль - грузить только первые 10, а если их больше, то остальные грузить только когда пользователь начнет скролить.
Но что-то совсем не могу придумать как это реализовать... Дайте подсказку, пожалуйста.

Answer 1

[Alex]

1. Уже вводят атрибут loading для картинок, так что вам и делать ничего не нужно.
   
2. Загружайте не все и не 10. Загружайте только те картинки что попадают в видимую область. И подгружайте новые только когда они вот-вот попадут в видимую область.
   
3. Читайте https://www.sitepoint.com/five-techniques-lazy-loa... и другие материалы на эту тему
   

Comments

[Андрей Федоров]

1. Ну это пока только в хроме. И потом забить на все не обновленные хромы - это не вариант.
2. Не знаю как детектировать видимую область. Я не особо специалист в js.
3. Почитаем, просто хотелось быстрого решения.

[sinneren]

Андрей Федоров, 2. Не знаю как детектировать видимую область. Я не особо специалист в js.
так загуглите. вы пытаетесь научиться,а просите готовое решение. хотите готовое - берете готовый модуль, коих легион. там же и посмотрите про viewport width\heigh, screenWidth\Height и прочее

Answer 2

[Stalker_RED]

просто хотелось быстрого решения

Простое решение = готовое решение. Выберите себе библиотечку из готовых, подключите-настройте и все.

Comments

[Андрей Федоров]

Необязательно. И библиотека - это сложное решение. И к тому же объемное. Не помогает ускорить сайт, а вредит этому.

[abberati]

Андрей Федоров, а велосипедостроение — это легко и просто. Учитывая, что библиотеки обновляются, оптимизируются и тестируются, а велосипеды — нет.

[Андрей Федоров]

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

[Stalker_RED]

Андрей Федоров, ок, план Б:
берете библиотеку, смотрите как она устроена, и повторяете это в "двух строчках".
А то сейчас вы хотите, чтобы кто-то написал этот код за вас. Причем вы уверены, что там всего две строчки, а авторы библиотек идиоты, что написали так много кода, и те кто ставит этим библиотекам звезды - тоже идиоты. Могли бы двумя строчками обойтись же.

[Андрей Федоров]

Stalker_RED, забавно видеть как некоторые люди мнят себя гуру психоаналитики. )

[Stalker_RED]

Андрей Федоров, не, немножко не так. Я однажды пытался написать свой аналог jQuery.offset в две строчки. Потом в шесть строчек. Примерно на 20 строчках (и спустя часа четыре), я сдался, и взял готовое.

Я могу написать эту вашу штуку со скроллом и итерациями, но в две строчки уложить - никак.

[Андрей Федоров]

Stalker_RED, две строчки - это абстракция, надеюсь вы понимаете. Я уже сам написал. Но мой код довольно топорный. Нашел и готовое решение, около 1Кб, но понять его пока не могу.