Улучшение прокрутки галереи изображений HTML

Question

В настоящее время я создаю фотогалерею для своего сайта, используя базовые блоки Packery JS и Div с изображениями внутри них.

<script>
   var $container = $('#content');
// init
$container.packery({
  itemSelector: '.item',
  gutter: 10,
});
   </script>

<div class="item" style="width: 388px; height: 259px;">
  <img src="Resources/images/IMG_8441 - Version 2.jpg" height="259px" width="388px" alt="Intersect" />
</div>

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

Answer 1

У вас есть фотошоп? Вам необходимо восстановить изображения с помощью "Сохранить для Интернета". Это позволяет значительно сократить размер изображения в зависимости от выбранных вами настроек. Это может помочь улучшить скорость. Другой вариант - увеличить сложность вашего JavaScript и добавить миниатюры вместо полноразмерных изображений. Еще раз вы можете использовать Photoshop или другое программное обеспечение для редактирования изображений и уменьшить размер изображения до 259 на 388 пикселей. Когда вы сохраняете их с измененным размером, размер файла будет значительно меньше. Когда пользователь нажимает на миниатюру изображения, javascript может использоваться для отображения полноразмерного увеличенного изображения.