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 に答える