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

Question

[Light 777]

Всем привет! Есть обычный сайт с портфолио, изображениями(около 70 изображений на одной странице). Сайт жестко тормозит хоть я и сжал все фотки. Как сделать так чтобы сайт подгружал 10 фоток, а остальные после нажатия кнопки "Показать еще"? Как называется эта фишка?

Answer 1

[JIakki]

ajax

Answer 2

[Владислав Бушуев]

Немного погуглив нашёл даже видео -> https://www.youtube.com/watch?v=Sv4YwZzIIQc

Comments

[Light 777]

У меня в организации youtube заблокирован ;(

[Владислав Бушуев]

А данные о фотографиях хранятся в БД?

[Light 777]

Владислав Бушуев: нет, в папке. Я их так тупо загружаю img src

[Владислав Бушуев]

Тогда Вам, то видео не поможет, так как я думал что данные в БД и их подгружать AJAX'ом. В JS пока что не силён и помочь с этим не смогу.

Answer 3

[Александр Кубинцев]

Можно обойтись и без ajax, но естественно нужно уметь использовать javascript.
Идея проста до безобразия.

1. Определяете массив-список с url-ами картинок.
   
2. Задаете обработчик для события "показать больше" (кнопка или бесконечный скролл - без разницы)
   
3. В этом обработчике делаете цикл, который будет брать скажем 10 следующих элементов из массива url
   
4. Внутри цикла создаете объект через "new Image", присваиваете ему свойство src = url из выборки и вставляете куда вам нужно в DOM
   

Answer 4

[Денис Инешин]

Прием называется Lazy Load.
www.appelsiini.net/projects/lazyload - например