我在第三方服务器上保存了一堆图像，我想在网页上加载并显示为缩略图......
我可以使用JavaScript加载每张图片，裁剪并调整它们的大小，然后将它们显示在页面的网格中吗？
理想情况下，我希望能够在客户端做到这一点。我真的不想在服务器上预先加载和处理它们，因为我不想增加带宽使用量。
答案 0 :(得分：7)
您可以将每个图像放在具有固定尺寸和overflow: hidden的块容器中，从而有效地裁剪它们（您还可以将图像放在容器内，并显示负top和left值选择图像的哪个部分可见。所有这些都是标准的CSS票价。在网格布局中显示元素也是如此。的 See an example
但是，请注意，这种解决方案虽然几乎不需要准备，但可以看似很容易理解。 用户仍然需要为您在页面中显示的每个裁剪元素下载完整的未剪切图像，这可能会变成多MB的数据。
根据您的使用情况，采用预处理图像的服务器端解决方案可能更为可取。
答案 1 :(得分：2)
也许这不完全是基于Javascript或Jquery的解决方案，但是这个脚本可以在电子商务网站或其他类型的网页上充满缩略图的网站上提供很多帮助。它有缓存机制，因此图像只处理一次： http://shiftingpixel.com/2008/03/03/smart-image-resizer/
答案 2 :(得分：1)
除非您使用<canvas>标记，否则JS无法直接裁剪/调整图片大小。最多可以通过将图像放入具有溢出的另一个元素来伪造裁剪：隐藏和调整偏移/边界。您可以通过设置图像的高度/宽度/缩放CSS属性来伪造调整大小。
但是如果您担心带宽，请考虑客户端大小调整器要求客户端从服务器加载完整大小的图像，然后才能对其进行任何调整。
答案 3 :(得分：0)
Javascript是一种客户端语言。所以在javascript可以控制它们之前必须首先下载图像。如果您要加载大量图像，最好制作一个服务器端脚本，在加载图像之前裁剪图像。