1

我对 Chrome 中的图像有这样的问题：

当页面加载时首先出现文本，然后文本移动，最后出现图像。

我将在屏幕截图中显示（如果有人想要我可以给你一个网站链接）

加载图像之前

后：

我已经设置了图像的大小。

HTML：

 <img alt="I_01" height="66" src="http://91.228.126.168:3000/images/i_01.png" width="73">

和 CSS（如您所见，我正在使用 Bootstrap ）：

  .second .span4 img {
  padding-right: 10px;
  float: left;
  }

问题：我需要添加什么才能使它们正确加载？我应该怎么做才能防止图像加载导致性能下降？

4

3 回答 3

1

您需要预加载图像，以便在浏览器显示图像之前图像在缓存中准备好。

图像预加载可以在 javascript 中完成。您可以按照以下链接进行相同的操作.....

http://www.learn-javascript-tutorial.com/ImagesWindowsandTimers.cfm#Preloading-Images

于 2012-09-17T08:13:38.827 回答
1

嗨，现在已经习惯了您锚链接中的背景图片

像这样

CSS

.textline{
display:inline-block;
  text-decoration:none;
  color:black;
  vertical-align:top;
  background:url('http://91.228.126.168:3000/images/i_01.png') no-repeat 0 0;
  padding-left:80px;
line-height:70px;
}

HTml

<a href="#" class="textline"> link Text</a>

演示链接

于 2012-09-17T08:16:46.047 回答
0

您可以明确指定图像的宽度和高度，即使尚未加载图像，文本也不会移动。浏览器会立即显示指定大小的空白图片，然后加载图片。

于 2012-09-17T08:30:52.747 回答