改进了 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

你有Photoshop吗？ 您需要通过"保存为网络"重新保存图像。 这使您可以根据您选择的设置大幅减小图像大小。 这有助于提高速度。 另一种选择是增加javascript的复杂性，并投入缩略图代替全尺寸图像。 您可以再次使用Photoshop或其他图像编辑软件，并将图像大小缩小到259 x 388px。 当您保存像这样调整大小的它们时，文件大小会小得多。 当用户单击缩略图图像时，javascript 可用于显示全尺寸的大图像。