4

当我将<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）。我的方法有效吗？

4

3 回答 3

8

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

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

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

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

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

于 2010-03-07T14:40:56.953 回答
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 图像精灵。

于 2010-03-07T14:41:23.240 回答
1

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

于 2010-03-07T14:37:57.043 回答