以下是我的网站：jaykasten.com
我在网格中有缩略图链接到灯箱中的完整图像。现在，我的网站加载了缩略图图像以及完整图像。
是否可以使用完整的图像文件并选择其中一部分作为缩略图显示，以避免必须加载额外的缩略图？最好只使用HTML和CSS。
答案 0 :(得分：2)
您很可能想要缩略图而不是完整图像，因为完整图像需要更长时间才能加载。每个几K的50个缩略图与每个几个meg的50个完整分辨率图像。但是我离题了。
这可以使用背景图像轻松完成。如果你创建一个div，anchor，span，你想要的任何东西，并设置function powerOf(x, n) {
var res = [x];
for(var c=1; c<n; c++) {
res.push(x *= x);
}
return res;
}
alert(powerOf(3, 4));属性来使用你的最终图像，你可以根据需要缩放和调整你的图像大小，它会切断你不想要的任何东西。使用。作为一个额外的好处，我不相信背景图像停止页面加载也不会引起布局故障，所以总而言之，它们工作得很好。
但是我仍然建议只加载用户想要的高分辨率，否则会增加页面的加载时间。您还可以查看https://github.com/teleject/hisrc或http://en.wikipedia.org/wiki/Lazy_loading之类的内容。这些中的任何一个都可能比在页面加载时加载所有高分辨率图像更好。
答案 1 :(得分：0)
使用CSS initialize和background-clip。像这样：
background-origin