jquery - 改进 HTML 图片库滚动

Question

目前，我正在使用基本的 Packery JS 和包含图像的 Div block 为我的网站构建一个照片库。

<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 388 像素。当您像这样调整大小后保存它们时，文件大小会小得多。当用户点击缩略图时，可以使用 javascript 来显示全尺寸的大图。