1

在我的网站上有一个网页，其中有 100 张图片，从浏览器一次加载一张图片是不雅的。

有没有办法让它更优雅、更美观？

4

5 回答 5

4

您可以延迟加载图像，这意味着它们仅在浏览器上显示时才会加载。这只需使用以下内容即可工作：

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

但是，如果在页面加载时可见的图像文件非常大，那么您无法采取任何措施来防止这种情况发生。

我之前使用的一个使这个更用户友好的想法是放置每个img元素，div其中每个元素都有一个ajax loader的背景图像。这至少给出了正在加载的外观。然后一旦加载图像，这将覆盖加载图像。

编辑：查看您的最新评论，如果您使用非常小的图像，正如@afaf12所指出的，使用CSS Sprites将是一个合适的解决方案。许多大型网站，包括 StackOverflow，都使用这些。这意味着不是为所有图像发出 100 个 HTTP 请求，而是发出 1 个 HTTP 请求（即 1 个图像下载），然后使用 CSS 将这个图像定位在不同的位置。

还可以使用各种不同的CSS Sprite 生成器来避免您自己制作的繁重任务：

于 2012-05-24T10:11:10.097 回答
2

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

您有 1 个大图像，而不是 100 多个小图像。

当你想显示一个特定的图像时，你必须指定背景坐标，例如：

div#div1 {background-position:0px -100px}
于 2012-05-24T10:16:23.010 回答
2

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

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

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

于 2012-05-24T10:22:20.127 回答
0

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

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

为所有图像创建容器，并且仅当它们在屏幕上可见时才加载实际图像。

于 2012-05-24T10:10:44.667 回答
0

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

于 2012-05-24T10:15:09.710 回答