Как порционно показать юзеру 1000 картинок на одной странице, без перезагрузки?

Question

[Родион Юрченко]

Привет !
есть страничка на которой надо показать 1000 изображений
сразу их грузить никто не хочет, да и не надо
Идея в том чтобы по клику показать юзеру 20 картинок
юзер кликнул - новые 20 картинок
еще кликнул - еще новые 20 картинок
и т д
2 вопроса: (Напоминаю - итоговая задача - 1000 картинок)
1й - как подгружать картинки по клику ?
я сделал так:
изначально на странице появляется 1000элементов [img src="#" data-src="настоящий_урл"]
по клику на кнопку - у первых 20 img в src подставляется data-src

судя по вкладке network - картинки подгружаются именно в момент клика - то что надо
Но может быть у вас будет лучше идея

2й вопрос - а как ВЫгружать уже просмотренные картинки из памяти ?
Если я снова убираю всё из src - то картинка то визуально изчезнет, но изчезнет ли она из памяти ?

Comments

[WbICHA]

изначально на странице появляется 1000элементов

Зачем? В чём проблема иметь 20 элементов и менять в них срц?

[Родион Юрченко]

отлично, действительно хорошая идея
А 2я часть вопроса ? Будет ли выгружаться старая картинка из памяти при смене src на следующую картинку ?

[ThunderCat]

Родион Юрченко,

Будет ли выгружаться старая картинка из памяти

Во первых стоит разделять память браузера и память ВМ яваскрипта. Она не выгрузится из "памяти" браузера, так как попадает в кэш (если только какие-либо директивы не повлияют на поведение браузера), что в большинстве случаев то же что и в памяти, а в память ВМ она не попадает, так как жс передает только урл картинки.
Во вторых - 1000 картинок на 1 странице обычно будет занимать больше чем просто 20 картинок + кэш, так как кэш по сути может быть в любом месте, в том числе и на диске.

[Алексей]

Как по мне - лучше не заставлять пользователя кликать, а добавить к картинкам атрибут loading="lazy" и пусть подгружаются при скролле

[mayton2019]

Родион Юрченко,

А 2я часть вопроса ? Будет ли выгружаться старая картинка из памяти при смене src на следующую картинку ?

Это сложный вопрос. Кажется он не регулируется на стороне JavaScript. Здесь он делегирован механике браузера при показе картинок. Скорее всего здесь у Mozilla/Chrome/Edge будут свои механики очистки. Во первых они обязательно сохранят картинки в дисковый кеш браузера. Во вторых они будут выгрузать редко используемые картинки по принципам кеша или тепловой карты. Но когда именно каждая конкретная картинка выгрузится - скорее всего никто не знает.

Answer 1

[Antonio Solo]

я сделал так:
изначально на странице появляется 1000элементов [img src="#" data-src="настоящий_урл"]
по клику на кнопку - у первых 20 img в src подставляется data-src

думаю это плохое решение - создавать сразу 1000
лучше по мере необходимости создавать новые элементы
и также динамически удалять - конечно встанет вопрос "а как быть с позиционированием и скроллингом"