0

我有一张图片原始尺寸假设为 1024 像素 X 768 像素。当我通过css背景属性将它加载到网站时，我会这样做：

  1. background: url('imgPath') no-repeat; width: 100px; height: 100px;
  2. background: url('imgPath') no-repeat; width: 1024px; height: 768px;

我有一个简单的问题：两种样式是否以相同的速度加载页面或第一种方法以更高的速度加载页面？

4

4 回答 4

1

在这两种情况下，客户端都必须下载完整的图像，因此加载时间是相等的。

如果你真的很在意：第一张图片会在几微秒后出现，因为在呈现给用户之前需要先重新缩放。

根据您是否使用服务器端脚本技术，您可以重新缩放并将重新缩放的图像缓存在服务器上。示例：imageurl 可能看起来像background.jpg?size=100x100，其中background.jpg实际上重定向到脚本页面，该脚本页面生成或加载以前生成的图像，所需大小从缓存中。

于 2013-08-18T05:08:30.030 回答
0

假设两个图像的“imgPath”相同，则两者将同时加载，因为……它应该只加载一次。您似乎认为宽度和高度可能会影响图像的加载方式，但事实并非如此。

http://jsfiddle.net/ericjbasti/AKGB5/

您也可能打算这样做：

background-size: 100% 100%;

如果您希望您的高度和宽度来缩放图像。

于 2013-08-18T05:43:21.670 回答
0

我也会一样，在这两种情况下都会加载整个图像，因为 CSS 在客户端工作。“加快”加载时间的唯一方法是对图像进行一些服务器端缩小。

在这种情况下，我会说你最好使用缩略图，否则你会浪费宝贵的服务器资源。

于 2013-08-18T05:59:45.010 回答
0

正如其他人所说，它将是相同的速度。你总是可以尝试这样的媒体查询：

   @media all and (min-width: 601px) {
     html {
     background: url('imgPath') no-repeat; width: 1024px; height: 768px;
     }

   }

   @media all and (max-width: 600px) {
     html {
     background: url('imgPath') no-repeat; width: 100px; height: 100px;
     }
   }

这是一篇关于它的非常好的文章：http: //timkadlec.com/2012/04/media-query-asset-downloading-results/

于 2013-08-18T06:51:01.613 回答