如何在页面加载前保存图像的位置？

Question

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;
  }

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

Answer 1

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

图像预加载可以在javascript中完成。你可以点击下面的链接..... [/ p>

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

Answer 2

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

就像这样

<强>的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>

的 Demo link 的

Answer 3

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