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。

虽然最佳方法可能是Lyon suggests，但css图像是精灵。

Answer 3

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

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

3 个答案: