Light777
@Light777
Developer

Как подгружать изображения при нажатии кнопки?

Всем привет! Есть обычный сайт с портфолио, изображениями(около 70 изображений на одной странице). Сайт жестко тормозит хоть я и сжал все фотки. Как сделать так чтобы сайт подгружал 10 фоток, а остальные после нажатия кнопки "Показать еще"? Как называется эта фишка?
  • Вопрос задан
  • 2724 просмотра
Пригласить эксперта
Ответы на вопрос 4
@JIakki
ajax
Ответ написан
Комментировать
Немного погуглив нашёл даже видео -> https://www.youtube.com/watch?v=Sv4YwZzIIQc
Ответ написан
akubintsev
@akubintsev
Опытный backend разработчик
Можно обойтись и без ajax, но естественно нужно уметь использовать javascript.
Идея проста до безобразия.
  1. Определяете массив-список с url-ами картинок.
  2. Задаете обработчик для события "показать больше" (кнопка или бесконечный скролл - без разницы)
  3. В этом обработчике делаете цикл, который будет брать скажем 10 следующих элементов из массива url
  4. Внутри цикла создаете объект через "new Image", присваиваете ему свойство src = url из выборки и вставляете куда вам нужно в DOM
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Прием называется Lazy Load.
www.appelsiini.net/projects/lazyload - например
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы