Question

在我的网站上有一个网页，其中有100个图像，看到从浏览器一次加载一个图像是不够的。

有没有办法让它更优雅，更好看？

Answer 1

您可以Lazy Load图像，这意味着它们仅在浏览器上显示时加载。这只需使用以下内容：

$("img.lazy").lazyload();

但是，如果在页面加载时可见的图像文件大小非常大，那么您可以做的就是防止这种情况发生。

我之前使用过的一个想法是将img元素放在div中，其中{{1}}元素的背景图片为ajax loader。这至少给出了装载物的外观。然后，一旦加载图像，这将覆盖加载图像。

编辑：看到您的latest comments，如果您使用非常小的图片，@afaf12指出，使用CSS Sprites将是一个合适的解决方案。许多大型网站（包括StackOverflow）都使用这些网站。这意味着不是对所有图像进行100次HTTP请求，而是进行1次HTTP请求（即1次图像下载），然后使用CSS将该图像放置在不同的位置。

还有各种不同的CSS Sprite generators可以防止您自己完成这项艰巨的工作：

Answer 2

由于图像非常小，这可能是css精灵有用的情况。

不是拥有100多张小图片，而是拥有1张大图片。

如果要显示特定图像，则必须指定背景坐标，例如：

div#div1 {background-position:0px -100px}

Answer 3

让它看起来更令人愉悦的一种方法是让图像在加载后淡入淡出：

$('img').css('opacity', '0.0').load(function(){
  $(this).animate({'opacity': '1.0'});
});

演示：http://jsfiddle.net/Guffa/gzFFN/

Answer 4

http://code.google.com/p/jquery-appear/

jQuery出现在对象“出现”时触发的事件，即在屏幕上可见。

为所有图像创建容器，并仅在屏幕上显示实际图像时加载它们。

Answer 5

可以在此堆栈链接上找到另一个有趣的解决方案。它适用于所有内容，但答案中提供的代码也可以应用于图像加载。 Link

在一个页面中加载100张图片的最佳方式？

5 个答案: