如何处理HTML PNG图像加载时间，CSS

当我有一个<a>标签设置为特定图像的背景是这样的：如何处理HTML PNG图像加载时间，CSS

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

来源

2010-03-07 Gal

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

假定活动图像是在顶部，和悬停图像如下that..your CSS代码直接定位会是这样的：

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

通知背景位置。这里我使用顶部和底部。你也可以精确地以像素为单位。这个例子中的整个图像的宽度为70像素，高度为48像素。有些网站将所有小图标放在一个图像中。完全加载，除了请求之外。 :)

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

来源

2010-03-07 14:40:56 Lyon

这也是一个不错的解决方案，我同意。 – 2010-03-07 14:41:49

这真是太棒了！伟大的解决方案，我没有想到，非常感谢！ – Gal 2010-03-07 14:47:26

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

来源

2010-03-07 14:37:57

可用的基本选项是使用隐藏在查看器中的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：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-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的做法，从这个页面全部被取消。

虽然最好的方法可能是，如Lyon suggests，css图像精灵。

来源

2010-03-07 14:41:23

如何处理HTML PNG图像加载时间，CSS

回答

相关问题