如何在html，css中处理PNG图像加载时间

Question

当我将<a>标记设置为特定的图像背景时，如下所示：

HTML:
<a href="..." title="click here">Click Here</a>

CSS:
a {
  background: transparent url(button.png);
}

并且我希望每当用户在现场盘旋时改变背景，如下所示：

CSS:
a {
  background: transparent url(button_HOVER.png);
}

当用户将鼠标悬停在链接上时，悬停背景图像会闪烁 （大约需要1-2秒才能完全加载）。

我可以将文件保存为GIF并缩小其大小和加载时间，但这would harm my specific image tremendously （它很大且图形化程度很高）。

这就是我寻找更好的解决方案的原因，例如可能依靠浏览器缓存图像的能力。 因此，我会将样式应用于这样的按钮：

CSS:
a {
  background: transparent url(button_HOVER.png);
  background: transparent url(button.png);
}

这样首先缓存图像button_HOVER。 它似乎影响了“闪烁”，但并非完全。 我想可能用HOVER图像创建一个隐藏标签，这样结果可能会有所不同。

你认为有更好的解决方法吗？ （我强调我想把文件保存为PNG，重量为6-7k）。 我的方法有效吗？

Answer 1

您的解决方案是将两个图像（悬停和活动）放在同一个图像文件中。 位于彼此之上。 也称为Image Sprites。 浏览器将加载整个图像文件。 悬停时，您只需更改背景位置即可。

假设活动图像位于顶部，并且悬停图像位于该图像的正下方..您的css代码将类似于：

a.link {
  width:70px;
  height:24px;
  background: url(image.png) top no-repeat;
}
a.link:hover {
  background-position: bottom;
}

注意背景位置。 在这里我使用顶部和底部。 您也可以精确地以像素为单位。 此示例中的整个图像的宽度为70像素，高度为48像素。 有些网站将所有小图标放入一张图片中。 完全加载，也可以节省请求。 :)

在这种情况下不需要预加载脚本。

Answer 2

可用的基本选项是使用隐藏在查看器中的html元素，或使用javascript。

尽管如此，html方法可能是最简单的方法：

<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>

with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }

或者，使用javascript：

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

从这个页面完全取消了jQuery方法： http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript 。

虽然最好的方法可能是，如里昂建议的那样 ，css图像精灵。

Answer 3

你应该搜索关于这个主题的“预加载图像”你会找到使用css和javascript预加载图像的方法。
我相信如果你把一个隐藏的图像与源相等的png图像的src你将在css文件中使用，这将使页面加载时加载图像，而CSS工作将只是切换预加载的图像。