Question

我的网站包含以下代码：

<ul>
<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx'  title='xx'><img src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy'  title='yy'><img src='../../Content/Icons/yy.png' />yy</a></li>
</ul>

有两个问题。

1）我想将我的图像合并到一个包含多个图像的较大图像文件中。我想过使用背景但是我坐在带有渐变背景的DIV上，所以我不认为我不确定它是否可能。请注意，我的图标具有透明背景。 2）页面显示时图像加载时出现延迟。他们加载后我的DIV轻微移位。

有没有人对我能在这做什么有任何想法。我需要的是图标定位是正确的。现在它看起来像这样：

xxxxxxxxxxxxxxxxx
x               x
x Icon     Home x
x               x
xxxxxxxxxxxxxxxxx

希望有人可以提供建议/提示。

Answer 1

对于第一个问题，我不确定将它们组合成具有多个图像的文件是什么意思。您可以将它们组合成单个图像文件，也可以将它们分开，就像现在一样。我不确定你将它们放在一个文件中会有什么好处。现代浏览器非常智能，你不会以这种方式减少超过几毫秒的时间。

第二个问题是浏览器在第一次渲染时错误地猜测图像大小。查看W3C's documentation以获取img标记。比如，你的图像是25像素×25像素。你可以这样做：

<img src='../../Content/Icons/xx.png' width="25" height="25" />

这样，浏览器就会提前知道图像可用后会占用多少空间。

如何改善图标图像的加载时间和布局？

1 个答案: