Кнопка «Показать еще» через Ajax или display: none?

Question

[Arinko]

Вопрос чисто теоретический. Есть превью галереи, на десктопе они выводятся полностью, их штук 8-10. На мобильных хотелось бы выводить всего 3-4 превьюшки, а остальные подгружать по желанию пользователя через кнопку "Показать еще". Правильное ли это решение? И как лучше реализовать скрытие остальных блоков: скрыть их display: none и управлять видимостью при клике на кнопку или отобразить на странице первые 3-4, а остальные подгружать аяксом? И вообще, в каких случаях предпочтительней управление видимостью уже существующей разметки, а когда ее подгрузка?

Comments

[Abigovor]

Показ с помощью кнопки "показать еще" хорошее решение.

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

В твоем случае если превьюшек всего 8-10 штук, запрос на сервере кэшируется и выполняется быстро, лучше реализовать через display:none

[Arinko]

Abigovor, Спасибо большое за помощь)

Answer 1

[eLig]

Если бы делал я, то решение зависело бы от веса картинок. Если не существенно, то display:none, если жирно, то тогда лучше ajax.

Comments

[Arinko]

Я просто не могу уловить разницу. Если картинки в превью задать бэкграундом и скрыть их родительский блок display:none, то они не загрузятся, пока пользователь не нажмет на кнопку и не поменяет на display: block. То же самое при отправке запроса, только здесь еще и связь с сервером. Т.е по ресурсам ajax получается все-равно более затратным?

[eLig]

Если мы говорим про мобильные страницы, то тут важно понимать, что не у всех 4G. Так же скорость загрузки страницы влияет на продвижение. Поэтому если жирно, то лучше загрузить часть, а потом если пользователь захочет, то подгрузить еще.

[Arinko]

eLig, Спасибо большое за ответ

[Игорь Васильев]

Arinko, display:none только прячет элементы, но они всё равно загружаются.
Если тянуть из базы данных, то через ajax подгружается по равной доле:
К примеру было:
... ->limit(10)->all();
Десятка через переменную указывается. И к примеру событие, если был скролл, или нажата кнопка, то

$i = 10;
.... if () {} else{
$limit = ++$i;
}

Будет уже 20 записей, и так далее. Как-то так ))

Answer 2

[Игорь Васильев]

Можно так:

<script>
$( 'button' ).click(function() {
  if ( $( "#box" ).is( ":hidden" ) ) {
    $( "#box" ).show( "slow" );
  } else {
    $( "#box" ).slideUp();
  }
});
</script>

<button>показать ещё</button>
<div id="box">тут картинки</div>

Если картинки тяжёлые, по мегабайту каждая или более, лучше через:

else ...
$( "#box" ).load( "ajax/image.html  #target" );
...

<div id="box">
      <div id="target"></div>
</div>